# Installation

If you prefer a video guide - here's a quick start guide to get your project up and running.

# Prerequisites

Before proceeding, make sure you have Node 16 (opens new window) installed. You can check this by running the following command:

node -v

# Installation steps

# Step 1: Generate a new project

The easiest way to get started with Vue Storefront is to set up your project using our CLI. You can run it using the following command:

npx @vue-storefront/cli generate store

It will ask you to enter the project's name and select Magento 2 as your e-commerce platform. Once selected, the CLI will create project files in the directory matching your project name.


CLI will use the project name you enter to create a new directory, so avoid using special characters and spaces.

# Step 2: Install dependencies

Go to the newly created directory and install the required dependencies:

cd <project_name>

yarn install

# Step 2. Setup and configure Magento

Before you can configure the project, you need to set up and configure a new Magento instance that Vue Storefront will connect to. To do so, follow the Configuring Magento guide.

# Step 3. Configure Vue Storefront

With the Magento instance setup and configured, you can connect your project to it. To do so, follow the Configuring Vue Storefront guide.

# Step 4. Start the project

The project is now ready. You can start the application in development mode using the command below. You can read more about available commands and environments on the Commands and deployment (opens new window) page in Nuxt.js documentation.

yarn run dev

Below are the tools we use to make the development and debugging easier, and we recommend you use them too.

# Vue.js Devtools

We strongly recommend installing Vue.js Devtools (opens new window) in your browser. It's an excellent tool for viewing component structures and their current state, inspecting events, routes, and much more.

# Vetur for VS Code

For those using Visual Studio Code as their primary code editor, we also recommend using Vetur extension (opens new window). It speeds up the development of Vue.js-based applications by providing features like Vue.js code autocompletion and syntax highlighting.