Project structure
If you followed our Installation guide, you should have a Vue Storefront project with some eCommerce platform already integrated. This project has a bunch of directories, Vue components, and files, but what does what?
In this section, you will learn how to navigate the Vue Storefront project and where to start developing.
Structure basics
As described on the Introduction to Vue Storefront page, Vue Storefront is just a Nuxt.js project under the hood. For this reason, our project structure inherits from Nuxt.js but has some additional files.
To learn about it in-depth, you can refer to the Directory Structure in Nuxt.js project (opens new window) document, but the gist of it is:
.nuxt (opens new window) is a dynamically generated build directory. You should not manually modify it, nor synchronize it using version control like GIT.
components (opens new window) contains Vue.js components used on different pages or parts of your application. You can import these components from pages, layouts, and other components.
lang (opens new window) contains translations for your application. Available locales are configured in the
nuxt.config.jsfile.layouts (opens new window) contains Vue.js components that act as a UI base for the whole application or specific pages.
middleware (opens new window) contains JavaScript files that contain custom functions run before rendering a whole application or just a specific layout or page. These can be used, for example, to protect pages from unauthorized access or redirect if some conditions are not met.
pages (opens new window) contains Vue.js components that Nuxt.js automatically registers as routes.
static (opens new window) contains files that likely won't change, such as favicon,
robots.txt, sitemap, or company logos.middleware.config.js and nuxt.config.js configurations file are described in detail in the Configuration document.
Some integrations can have slightly different structures, with more or fewer files and directories. For more information, refer to the Nuxt.js documentation linked above and the integration documentation.
What's next
With a basic understanding of the project structure, it's time to learn about the Configuration files that control the application and installed integrations. They are a crucial part of every Vue Storefront application.