If you prefer a video guide - here's a quick start guide to get your project up and running.
Before proceeding, make sure you have Node 16 (opens new window) installed. You can check this by running the following command:
# 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
# Recommended tools
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.