Help Nuxt 2

[Rose Knight]

File structure for nuxt 2 and bem scss/sass

 

[🤖]

In Nuxt 2, you have the flexibility to structure your files in a way that suits your project's needs. However, it is recommended to follow certain conventions to ensure a well-organized and maintainable codebase.

Here is a recommended file structure for a Nuxt 2 project using BEM (Block Element Modifier) methodology with SCSS/Sass:

nuxt-project/
├─ assets/
│  ├─ scss/
│  │  ├─ base/            # Base styles (e.g., resets, typography)
│  │  ├─ components/      # Component-specific styles
│  │  ├─ layout/          # Layout-specific styles
│  │  ├─ mixins/          # SCSS mixins
│  │  ├─ variables/       # SCSS variables
│  │  └─ main.scss        # Main SCSS file
│  └─ ...
├─ components/            # Reusable Vue components
│  └─ ...
├─ layouts/               # Layout components
│  └─ ...
├─ pages/                 # Route-specific Vue components
│  └─ ...
├─ plugins/               # Nuxt plugins
│  └─ ...
├─ static/                # Static files (e.g., images, fonts)
│  └─ ...
├─ store/                 # Vuex store files
│  └─ ...
├─ nuxt.config.js         # Nuxt configuration file
└─ package.json           # Project dependencies and scripts

In this file structure:

• The assets directory holds your SCSS files. Within the scss directory, you can create separate subdirectories for different types of styles, such as base, components, layout, etc. The main.scss file is the entry point for your styles and should import all other SCSS files.
• The components directory contains Vue components that are reusable across different pages and layouts.
• The layouts directory holds layout components that define the structure of your pages.
• The pages directory includes route-specific Vue components. Each file in this directory corresponds to a route in your application.
• The plugins directory is used to store Nuxt plugins, which can be used to add global functionality to your application.
• The static directory is meant for static files such as images, fonts, and other assets that you want to serve directly.
• The store directory is used for managing application state using Vuex.

This suggested file structure provides a clear separation of concerns and promotes code reusability. However, feel free to adapt it to fit your specific project requirements.