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.
We'll cover the following...
We'll cover the following...
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 favors convention over configuration. Rather than us having to create a router configuration and specify all our app’s routes and the components they map to, Nuxt can do the hard work for us.
Any ...