Vue Storefront 2

# Installation

# Prerequisites

Before proceeding, make sure you have Node 10+ (opens new window), Yarn 1 (opens new window) and Git (opens new window) installed.

# Using Vue Storefront CLI

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

# Run Vue Storefront CLI
npx @vue-storefront/cli init

Enter the name of the project and select the backend platform you wish to use.

Vue Storefront CLI

Once selected, the CLI creates the project files in the directory matching your project name. The only thing left is to go to this directory in the terminal and install the dependencies:

# Go to project folder
cd <project_name>

# Install required dependencies
yarn install

Now the project is ready. To start the application in development mode, use the yarn dev command:

# Start the project in development mode
yarn dev

You can read more about available commands and environments on commands (opens new window) page in Nuxt.js documentation.

# Vue.js Devtools

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

Process of installing Vue.js Devtools plugin in Chrome browser

(Vue.js Devtools installation in Chrome browser)

Usage of Vue.js Devtools with Vue Storefront application

(Vue.js Devtools usage example)

# Vetur for VS Code

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

To install Vetur extension:

  1. Open VS Code
  2. Open Extensions
  3. Search for Vetur
  4. Click Install
Process of installing of Vetur plugin in Visual Studio Code

(Vetur installation in Visual Studio Code marketplace)

Example of autocompletion provided by Vetur

(Example of code autocompletion provided by Vetur)

# What's next?

  • Learn about key concepts in Vue Storefront to confidently work with your newly created Vue Storefront project.
  • Check out the platform-specific docs in the eCommerce platforms category to learn more about your integration.

← Key concepts →