What is VueFront's Technology Stack

VueFront is built using the latest technology stake, which includes:

1. VueJS - progressive javascript framework
2. Nuxt - progressive VueJS framework
3. GraphQL - a query language for API
4. Apollo - graphQL devtools

The component structure follows the Atomic design pattern and presented via storybook

A VueFront App is

• a PWA
• a SPA
• Uses AMP for product and blog posts

VueFront, Static Sites & JAMstack

VueFront can be used as a JAMstack site. The term JAMstack was coined by the creator of Netlify and it stands for:

• JavaScript
• API
• Markup

A JAMstack is:

• a site that is pre-rendered and does not need a server.
• not a site that relies on server-side rendering.
• not a single page application that renders on runtime.

Since VueFront is built on Nuxt, it has the option to yarn generate a static website. This is perfect for blogs and business websites that have little to none page changes and do not rely on the server.

For e-commerce solutions where you have a cart and checkout, this could be hard to implement.

Components, Atomic Design and StoryBook

VueFront is built with VueJS on Nuxt. Since there are over 50 different components, we decided to implement the Atomic Design pattern to structure them and use StoryBook to nicely present them.

Atomic Design enforces a structure on the components by separating them into:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

We have also added Extension to separate the components brought in by third-party apps which can be placed on a page via positions.

VueFront Themes

VueFront is extensible by default. When defining the architecture of the VueFront WebApp, we wanted to hide the core and only expose what can be modified.

When it comes to theming, VueFront implements a 3-level cascade templating.

1. Default (the core of VueFront, not editable)
2. Theme (extends the Default Components, not editable)
3. Custom (extends the Default Components, editable)

This allows for a VueFront Web App to update the VueFront Default or Theme level without overwriting any of the custom implementations.

Since a custom component has to extend the default component, it will preserve the future functionality of the component.

VueFront Apps

Since VueFront implements a GraphQL API that is strictly defined for all CMS, extra functionality will have to be provided by third-party apps.

Apps will utilize the same CMS Connect URL to gather the required data, analyze it, and present new data via its own API for its custom components.

App components are called extensions and they can be positioned in a VueFront Web App via positions and vuefront.config.js