VueFront is built to be developer-friendly. We try to follow common Vue practices and avoid "magic". Our main goal is to simplify the process of creating PWA and SPA web apps.
VueFront uses the following technologies
Client-side
Server-side
VueFront consists of Components (Vue) and the Store (Data, fetched from your current CMS). When designing a new theme or adding modifications to an existing one, you will edit only the components folder.
The components follow the Atomic design pattern and consist of 6 folders:
Dumb components are those components that have no logic such as a button or a form field. On its own they do nothing.
Smart components actually include logic such as a login form.
In essence VueFront consists of Component atoms, which then are composed into molecules and organisms eventually creating a page.
Atoms are the smallest components that do not include other components. They also can not have a slot field.
Any modification of the component is done via props.
components
└── atoms
├── alert
├── amp-image
├── badge
├── button
├── checkbox
├── checkbox-group
├── datepicker
├── heading
├── icon
├── image
├── input
├── link
├── loader
├── pagination
├── radio
├── radio-group
├── select
├── textarea
└── timepicker
Molecules are components that have no logic like atoms, yet are more complect than an atom and can be composed of atoms and molecules. May have a <slot> too.
components
└── molecules
├── account-menu
├── account-new
├── account-success
├── breadcrumb
├── button-group
├── card
├── cart-footer
├── cart-product
├── category-thumb
├── checkout-success
├── client-only
├── col
├── compare-link
├── contact
├── container
├── dropdown
├── empty
├── field
├── input-group
├── list-group
├── location-thumb
├── logo
├── media
├── menu
├── post-image
├── post-nav
├── post-thumb
├── post-thumb-image
├── post-thumb-inline
├── product-attribute
├── product-image
├── product-option
├── product-price
├── product-quantity
├── product-thumb
├── product-thumb-image
├── product-thumb-inline
├── rating
├── review
├── row
├── skeleton
├── table
├── table-horizontal
├── tabs
└── wishlist-link
Organisms are components that carry most of the logic like login forms and cart, yet most of the styling is and html is added vie composing atoms molecules.
components
└── organisms
├── account-edit-form
├── address-actions
├── address-create-form
├── address-edit-form
├── apollo
├── blog-category-post
├── breadcrumb
├── cart
├── cart-products
├── category-grid
├── category-info
├── category-product
├── compare-actions
├── contact-form
├── currency
├── footer
├── form
├── header
├── header-mobile
├── language
├── location-grid
├── login-form
├── manufacturer-filter
├── manufacturer-info
├── manufacturer-list
├── manufacturer-product
├── modal
├── notification-snack-bar
├── notification-toast
├── password-form
├── position
├── post-grid
├── post-module
├── post-reviews
├── product-buy
├── product-grid
├── product-module
├── product-options
├── product-reviews
├── product-sort
├── product-thumb
├── register-form
├── review-form
├── review-list
├── search-form
├── search-inline-form
├── sidebar
└── wishlist-actions
Templates are used to compose the final page. You most often won't need to modify this as it is a simple combination of Component elements. You may use this folder to add new custom templates.
components
└── templates
├── account
│ ├── account
│ ├── address
│ ├── addressCreate
│ ├── addressEdit
│ ├── edit
│ ├── login
│ ├── password
│ ├── register
│ └── success
├── blog
│ ├── category
│ └── post
├── common
│ ├── contact
│ ├── error
│ ├── layout
│ ├── page
│ └── search
├── layouts
│ ├── default
│ └── fullWidth
└── store
├── cart
├── category
├── checkout-success
├── compare
├── manufacturer
├── manufacturerList
├── product
├── special
└── wishlist
Pages are components that use Templates to organize the data. They carry most of the logic on the page and use the store to fetch data and display it.
components
└── pages
├── account
│ ├── account
│ ├── address
│ ├── addressCreate
│ ├── addressEdit
│ ├── edit
│ ├── login
│ ├── password
│ ├── register
│ └── success
├── blog
│ ├── category
│ └── post
├── common
│ ├── contact
│ ├── error
│ ├── home
│ ├── page
│ └── search
└── store
├── cart
├── category
├── checkout
├── checkout-success
├── compare
├── manufacturer
├── manufacturerList
├── product
├── special
└── wishlist
Extensions (Widgets) are components that can be positioned on a page via the vuefront.config.js file. They can carry logic like organisms or be as simple as an atom. Third-party apps will use this folder to add their custom components.
components
└── extensions
├── account
│ ├── account
│ └── account-links
├── blog
│ ├── category
│ ├── latest-post
│ └── search-post
├── common
│ ├── extra-links
│ ├── menu
│ ├── pages
│ ├── search
│ └── slideshow
└── store
├── category
├── checkout
├── featured-product
├── latest-product
├── related-product
├── search-product
└── special-product
Now, that you know the structure of VueFront, here is how you can modify a component.
Let's modify the header component element.
.
└── components
└── organisms
└── header
├── index.js
├── header.vue
└── header.scss
In your components folder create a new folder with the path of the file you plan to extend. For example: components/organisms/header
Now add the component file with a path components/organisms/header/header.vue
add the following code:
<template>
<section class="vf-o-header md:block hidden">
<vf-m-container>
<div>THIS IS THE MODIFICATION</div>
<vf-m-row class="vf-o-header__top">
<vf-m-col md="4" align-self="center" class="sm:text-left">
<vf-o-currency />
<vf-o-language />
</vf-m-col>
<vf-m-col md="4" class="md:text-center">
<vf-m-logo />
</vf-m-col>
<vf-m-col
md="4"
align-self="center"
class="flex md:gap-4 sm:text-right md:justify-end"
>
<vf-o-search-inline-form />
<vf-m-wishlist-link />
<vf-m-account-menu />
<vf-o-cart />
</vf-m-col>
</vf-m-row>
</vf-m-container>
<vf-o-position class="vf-o-header__menu" name="headerMenu" />
</section>
</template>
</template> tag add the following script. It is required to import the mixin of the core Element.<script lang="ts">
import { defineComponent } from "vue";
import { oHeader } from "vuefront/lib/components/organisms/header";
export default defineComponent({
extends: oHeader
});
</script>
By adding this script you are extending the core component. This way you will be able to update the core without losing any functionality.
vuefront.config.js the new header component.module.exports = { object:module.exports = {
organisms: {
Header: {
component: '~/components/organisms/header.vue',
}
},
...