I've been working with Vue for years now and I've always struggled to find the ideal configuration / project structure. However, since the release of Nuxt 3 RC 1, I've started using Nuxt in my side projects. It's a 'meta framework' for Vue and I can tell that I've saved countless hours using it. Here are some of the features that I like about it:
File routing:
To create a basic router in Vue, you need to install vue-router
, maintain it's configuration in main.ts
and define the routes by hand. In funkwhale, we now have the routes described in src/routes/*/*.ts
and the routes have their respective views in src/views/**/*.vue
.
While using nuxt, you can simply create a file structure like so:
pages/
+-- index.vue
+-- users/
+-- index.vue
+-- [id]/
+-- index.vue
+-- edit.vue
These files are the views of the routes but moreover, their relative paths define the in-browser paths:
/
/users
/users/[id]/
/users/[id]/edit
And the [id]
part is a dynamic id
path parameter that can be accessed in the code as simple as:
const route = useRoute()
const id = computed(() => route.params.id)
Auto Imports:
I know there are people who are against them. The main argument I remember is that the developers wouldn't know if ref
is imported from Vue, or Lodash, or whatever else package. The truth is that, there is a limited number of imports that one needs to learn but also we are living in times where pretty much every code editor can show you, from where the function is or guide you to the declaration. There are even plugins for vim that add LSP support, combine it with Volar language server and you have awesome in-editor Vue/TS support now.
There was a lot of thought dedicated to the auto imports feature:
- By default, you are able to access all Nuxt's composables and most Vue functions
- When you for example
import ref from 'ref-package'
, the locally imported ref
is shadowing the global Vue ref
- When you
export default
from a composable/useSomething.ts
, you can access useSomething
in the code
- When you
export const trackList
from composable/tracks.ts
, the trackList
is available globally
- When you install Nuxt module, they in most cases automatically add their composables globally
Modules:
There are lots of preconfigured modules for Nuxt.
Devtools:
I've started using their devtools just yesterday. They are awesome. You can check pretty much everything. Click on an element, and your editor will open the component you clicked on on a line of the HTML tag you've clicked on is. They can even display VSCode server which would be great for quickfixing. They have SEO analyzer and bundle size analyzer. You can also preview the application state and the network requests. You can re-run the requests and see the data returned. Moreover, every module can register its own devtools. You can preview assets or routes or components used on current page. I wish we had all those in Funkwhale, it would optimize my workflow to the max. Vue devtools + browser devtools are worse in my opinion compared to Nuxt's devtools but they also have their own advantages like performance monitoring and other stuff.
Although I've started to write this topic in the morning, Fireship did a video describing some core features of Nuxt in 100 seconds: https://www.youtube.com/watch?v=dCxSsr5xuL8