Quick Setup

Try our 5-minute setup

  1. Install CMS Connect App. Download and install your CMS Connect app →

  2. Install VueFront (you should have Nodejs >= 8 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

Step 1. Install CMS Connect App

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.

  • Wordpress/Woocommerce
  • OpenCart

view all CMS Connect Apps →

The CMS Connect App will provide you with your API Url. You will need it on the next step when installing VueFront

TIP

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.

Step 2. Install VueFront

VueFront is a Single page application that needs to be hosted on a NodeJs server for Server-side rendering. It requires the following:

  • nodejs >= 8
  • yarn (or nmp)

After you have installed the CMS extension, activated it and received the CMS Connect Url, you can now install VueFront.

# Create VueFront app. replace <project-name> with vuefront or ./ for selected folder
yarn create vuefront-app <project-name>
# OR npx create-vuefront-app <project-name>

yarn dev

<project-name> is the name of the folder in which VueFront will be installed. For simplicity replace it with vuefront

After you have launched the app in dev mode, you should see your site at http://localhost:3000

Create-vuefront-app

VueFront consists of the following modules:

  1. vuefront (Github)
  2. vuefront-nuxt (Github)
  3. vuefront-cli (Github)

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.

Recommendations

When installing VueFront, we recommend sticking to the following rules:

  1. using always yarn as the default package manager
  2. using vue cli as your Vue framework for new users and nuxt for advanced users.