We are updating our site. If you find a bug hit us on our discord channel chat with us

# VueFront for Developers

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

  • Vue
  • Vuex
  • Apollo
  • Nuxt (or Vue Cli)
  • Rollup
  • PostCSS

Server-side

  • GraphQL
  • NodeJs (optional for Server-Side Rendering)

# Component Structure

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:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages
  • Extensions

# Dumb components

Dumb components are those components that have no logic such as a button or a form field. On its own they do nothing.

  • Atoms
  • Molecules
  • Templates

# Smart components

Smart components actually include logic such as a login form.

  • Organisms
  • Pages
  • Extensions

# Atoms

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 //todo: move to molecules
    ├── amp-image
    ├── badge
    ├── button
    ├── heading
    ├── icon
    ├── image
    ├── input
    ├── link
    ├── loader
    ├── pagination
    ├── select
    └── textarea

# Molecules

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
    ├── button-group
    ├── card
    ├── cart-link
    ├── category-thumb
    ├── collapse
    ├── compare-link
    ├── contact
    ├── container
    ├── dropdown
    ├── empty
    ├── field
    ├── grid //todo: separate into row and col
    ├── index.js
    ├── input-group
    ├── list-group
    ├── location-thumb
    ├── logo
    ├── media
    ├── new-customer
    ├── post-image
    ├── post-nav
    ├── post-thumb
    ├── post-thumb-inline
    ├── post-thumb__image //todo: move to post-thumb
    ├── product-attribute
    ├── product-image
    ├── product-image__popup //todo: move to product-image
    ├── product-option
    ├── product-price
    ├── product-thumb
    ├── product-thumb-inline
    ├── product-thumb__image //todo: move to product-thumb
    ├── rating
    ├── review
    ├── table
    ├── table-horizontal
    └── wishlist-link

# Organisms

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
    ├── cart-actions
    ├── cart-footer
    ├── cart-quantity
    ├── category-grid
    ├── category-info
    ├── category-product
    ├── compare-actions
    ├── contact-form
    ├── currency
    ├── footer
    ├── form
    ├── header
    ├── header-mobile
    ├── language
    ├── layout
    ├── location-grid
    ├── login-form
    ├── 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

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
    ├── blog
    │   ├── category
    │   └── post
    ├── common
    │   ├── contact
    │   ├── error
    │   ├── page
    │   └── search
    └── store
        ├── cart
        ├── category
        ├── compare
        ├── product
        ├── special
        └── wishlist

# Pages

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
    ├── blog
    │   ├── category
    │   └── post
    ├── common
    │   ├── contact
    │   ├── home
    │   ├── page
    │   └── search
    └── store
        ├── cart
        ├── category
        ├── checkout
        ├── compare
        ├── product
        ├── special
        └── wishlist

# Extensions (Widgets)

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

# How to modify a component

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
  1. In your components folder create a new folder with the path of the file you plan to extend. For example: components/organisms/header

  2. Now add the component file with a path components/organisms/header/header.vue add the following code:

<template>
  <template>
  <section class="vf-o-header">
    <vf-m-container>
      <div>THIS IS THE MODIFICATION</div>
      <vf-m-row class="mb-3 py-2">
        <vf-m-col align-self="center" class="text-sm-left">
          <vf-o-currency />
          <vf-o-language />
        </vf-m-col>
        <vf-m-col align-self="center" class="text-sm-right">
          <vf-m-compare-link class="ml-auto" />
          <vf-m-wishlist-link />
          <vf-m-account-menu />
        </vf-m-col>
      </vf-m-row>
      <vf-m-row class="mb-3">
        <vf-m-col md class="text-md-left" align-self="center">
          <vf-m-logo />
        </vf-m-col>
        <vf-m-col md="auto" align-self="center">
          <vf-o-search-inline-form class="mx-auto" />
        </vf-m-col>
        <vf-m-col md class="text-md-right" align-self="center">
          <vf-m-cart-link />
        </vf-m-col>
      </vf-m-row>
      <vf-o-position name="headerMenu" />
    </vf-m-container>
  </section>
</template>
  1. In the same file after the closing </template> tag add the following script. It is required to import the mixin of the core Element.
<script>
import { oHeader } from "vuefront/lib/components/organisms/header";
export default {
  mixins: [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.

  1. Great. Now we need to add index.js files to every folder so that we can import the component file properly in vuefront.config.js
  • create file components/index.js
export * from './organisms'
  • create file components/organisms/index.js
export * from './header'
  • create file components/organisms/header/index.js
export { default as oHeader } from './header.vue'
  1. And finally, import in your vuefront.config.js the new header component.
  • At the beginning of the file:
import * as components from './components'
  • inside the export default { object:
export default {
    organisms: {
        Header: components.oHeader
    },
...