Nuxt.js

Last updated September 16, 2022.

Nuxt.js is a production-ready Vue.js framework that also provides excellent developer experience. It’s inspired by Next.js, hence the naming, and exists for a similar purpose as Next.js but does a few things differently.

Notable features of Nuxt.js:

• Auto-importing, where every file has access to every component, meaning you never have to import a component again.
• Automatic code splitting.
• Ships with pre-configured packages like Vuex, Vue Router and vue-meta.
• Gives you a standard folder structure with special purposes associated with each folder. For example, the pages/ directory gives you filesystem routing where each of the .vue files inside are mapped into web pages, similar to what Next.js does.
• Nuxt.js uses Nitro, a server-side program that enables you to use SSG, use SSR, build APIs, deploy to the edge, etc. You can still opt for a pure SPA.

Nuxt.js has a create-vue-app CLI that sets up everything.

1
2

npx create-nuxt-app <project_name>
yarn create nuxt-app <project_name> 

This section contains a tl;dr of basic things to know to work with Nuxt.js projects.

The basic directory structure is pretty similar to that of Next.js.

1
2
3
4
5
6
7

.
├── components/       # All your UI components live here. They're always available through Nuxt.js' auto-import.
├── pages/            # Filesystem routing. Every .vue file here becomes available at a client-side URL with the corresponding path.
├── static/           # Publicly accessible unchanging content.
├── store/            # For Vuex.
├── test/             # For unit tests.
└── nuxt.config.js