# 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 >= 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

# 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

# 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 >= 12
• 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 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 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. vite-plugin-vue-vuefront (Github)
4. 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 vite