Search⌘ K
AI Features

Getting Started with Nuxt

Explore Nuxt.js folder conventions and how automatic routing works with the pages directory. Understand dynamic route creation using underscores. Learn how layouts enable flexible page structures and how to apply different layouts to components.

Let’s take a look at the folder structure that Nuxt uses.

Default directory structure

Here’s is the default folder structure that the Nuxt installer leaves us with:

├── assets
├── components
│ └── Logo.vue
├── layouts
│ └── default.vue
├── middleware
├── pages
│ └── index.vue
├── plugins
├── static
│ └── favicon.ico
├── store
├── nuxt.config.js
├── package.json
└── package-lock.json
Default folder structure in Nuxt project

Let’s look at each of these folders and see what role they play within a Nuxt application.

Pages

Nuxt ...