Try our 5-minute setup
Install CMS Connect App. Download and install your CMS Connect app →
Install VueFront (you should have
Nodejs >= 12 and
yarn or npm installed)
# Create VueFront app. replace <project-name> with vuefront yarn create vuefront-app <project-name> # OR npx create-vuefront-app <project-name> yarn dev
For VueFront to have access to your website data, you need to install a CMS Connect App that will provide a GraphQL API endpoint. VueFront will then to fetch all the data from your website like any other web app. CMS Connect APP also adds the required functionality such as submitting reviews, adding products to cart, checkout, etc.
The CMS Connect App will provide you with your API Url. You will need it on the next step when installing VueFront
Didn't find a
CMS Connect App for your current website. No biggy. Simply send us a request and we will be happy to create one for you.
VueFront is a Single page application that needs to be hosted on a NodeJs server for Server-side rendering. It requires the following:
After you have installed the CMS extension, activated it and received the CMS Connect Url, you can now install VueFront.
# Create VueFront Web App. replace <project-name> with vuefront or ./ for selected folder yarn create vuefront-app <project-name> # OR npx create-vuefront-app <project-name> # launch VueFront Web App in dev mode yarn dev
<project-name> is the name of the folder in which VueFront will be installed. For simplicity replace it with
After you have launched the app in
dev mode, you should see your site at http://localhost:3000
VueFront consists of the following modules:
For a simpler installation process, we have provided create-vuefront-app, which helps you set up your vuefront with ease.
It will ask you several questions to configure your VueFront app.
When installing VueFront, we recommend sticking to the following rules:
yarnas the default package manager