Before proceeding, make sure you have Node 14 (opens new window) installed. You can check this by running the following command:
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 the e-commerce platform you wish to use. 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.
Go to the newly created directory and install the required dependencies:
cd <project_name> npm install
The next step is to configure your project, and it's different for every e-commerce integration. Go to the Integrations page, open the documentation for the integration you selected in our CLI, and look for the page describing the configuration steps.
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.
npm run dev
Below are the tools we use to make the development and debugging easier, and we recommend you use them too.
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.
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.
Now that we understand what Vue Storefront is, it's time to understand the Project structure and learn how to navigate it and which files do what. You can also check the platform-specific documentation on the Integrations page.