Vue.js is a solid option for building web applications.
To use it we have two major tools:
- Vue CLI 3 the Standard Tooling for Vue.js Development
The official solution to quickly setup a Vue application.
- Nuxt Universal Vue.js Applications
Yeah, we will talk about that.
But how dœs Nuxt differ from a Standard Vue Application?
- A different tool to setup your Vue application
- Some convention over configuration
- The ability to move from a Single-page application (SPA) to a Universal Web application
[UPDATE] use now Nuxt 2
There’s two ways Nuxt can be installed:
- with vue-cli
- a basic
npm install nuxtor
yarn add nuxtif you’re a yarn person, create some folders and add some modules if you want to use pre-processors
I prefer the latter one as it doesn’t rely on any global dependency… and it’s also a good way to integrate Nuxt to an existing project.
For a web application, I always add:
I’m 100% sure that at one point or another I will need them.
Having the internationalization being done as soon as possible doesn’t demand a lot of extra efforts and prevents me the boring task of including it later (going file by file and adding the i18n calls & keys…)
Vue doesn’t enforce any kind of structure but we all like & need to stay organized.
If you use Vue CLI, it will create this kind of structure:
- 📁 src
your application's entry point
main Vue component
- 📁 assets
all static files
- 📁 components
other vue components
- 📁 views
your pages' components
- 📁 store
your Vuex Store
Nuxt will require something like that:
- 📁 static
all static files
- 📁 pages
all page files
- 📁 layouts
all layouts files(a nuxt thingy thing that we will speak about later)
- 📁 store
your Vuex Store
- 📁 plugins Vue plugins
It’s a flatter structure with obvious names.
Both Vue CLI & Nuxt propose a bunch of useful commands.
I’ll just speak about the main ones. They both serve the same purpose:
- make a quick development server to start coding
- build for production
Vue CLI use vue-cli-service which is a local package to launch the magic.
vue-cli-service servedevelopment server
vue-cli-service buildbuild for production
Nuxt has the equivalent commands.
No need to install an additional module 👍
nuxt buildbuild for production
I usually make the same npm scripts aliases across all my projects:
After that, I can do
yarn dev to start coding &
yarn build to export.
Those commands will stay independent of whatever the application is using underneath.
Nuxt relies in some part on convention over configuration.
By creating files, Nuxt will take care of integrating them in your Vue application’s.
Here are the main domains where it shines.
In a standard Vue application you’ll need to manually configure the router.
This is how the
router.js usually looks like:
This has some drawbacks when refactoring.
If you want to rename a route, you’ll have to:
- rename the component
- modify the
- change the route name
- change the component import
- change the webpack chunk name
With Nuxt, this routing will look like this:
- 📁 pages
- 📁 bar
Renaming a route is now just changing a file/folder name.
And you have the page code splitting out of the box.
The same goes with a standard Vuex store:
And as you’ve guessed in Nuxt it just follows the same principles as for the routing:
- 📁 store
With the same advantages as the routing.
Still, there is a classic mode if you want to have more control over it.
Nuxt provides a way to handle many page layouts in a breeze.
I think most of the time you’ll stick with the basic:
If you want to achieve this in a regular Vue application, you’ll have to do it manually by wrapping every page components inside the desired layout component… which will bloat a little bit your code.
So not a must have but definitively a nice addition 🏅.
Integrating more things from the Vue ecosystem is similar to what it is in a standard Vue application.
This is well documented here.
For example, create a
i18n.js file in the
…and update the
…and you can use
$t('my-i18n0key') inside your app!
As for now, Nuxt doesn’t support a
convention over configuration pattern for plugins’ integration 😐 so you’ll have to write some boilerplate code.
On the bright side this code is unlikely to change in the future.
But what in fact looks like an unnecessary configuration serves in fact a very important purpose.
Nuxt allows us to build
universal web applications.
This means that it should be able to bundle your code:
- for the browser
- for the server
If you’re only targeting the browser (SPA), you don’t have to worry about it.
But if you’re running the code on the server, you don’t want it to break because of the use of some browser API.
Nuxt prevents that with a small additional configuration.
browser.js will be removed from the server bundle, and we’re assured that our code won’t
throw because of a missing
window object in the NodeJs environment 😅
In my opinion the main advantage of Nuxt is how convenient it is to make a small prototype and build upon it until a first result.
While being sure that we can make it evolve in any direction in the future.
Writing a SPA makes you able to build quite quickly a small app and give anyone the opportunity to play with it in almost real conditions.
And now that you’re satisfied with your prototype, you can push it further by integrating it to a Node server.
Nuxt provides some templates to see how integration works many frameworks:
I’ll use Koa 🐨
package.json you should update your scripts:
You will need to update a little bit your existing code
- Take care of your store’s actions to point to your new API.
- use backpack to run/compile your server application.
This is mainly due to the fact that we’re using ES Modules on the server, and that NodeJS isn’t still there.
Besides that there isn’t much more to do.
Everything will work as expected.
Building a Universal Web Application can seem unnecessary but it comes with some advantages:
- Better initial rendering time
- Should have a better SEO (you can read more about SEO here)
This post isn’t an exhaustive list of what Nuxt can offer you.
Here’s a quick list of other things that it provides:
- out of the box HTML meta tags with vue-meta
- out of the box Page transitions
- out of the box Loading Progress Bar
- out of the box asyncData & fetch hooks.
This gives a way to get async data on the server before rendering the markup
- a good documentation
- a great choice of modules thanks to the nuxt community.
Those provide a good way to integrate some popular libraries (like Axios for example)
Nuxt doesn’t have a beautiful GUI 😶 but it’s a very clever piece of code that makes me feel more productive while building a website or an application.
I’ve made a small demo repository with almost the same code as used in this post.
If you want to learn more, here are some useful links I’ve came across recently:
- 7 Frontend Architecture Lessons From Nuxt.js by Kevin Ball
A good analysis on how Nuxt can help you
- 10 reasons to use Nuxt.js for your next web application by Derick Sozo
Another analysis about the strong points of nuxt
- Vue.js — There and Back Again in 1.5 years by Coreus.
It’s not about nuxt, but it talks about living in the long term with a Vue Application.
There is also a small part about component/views folder structure that resonates with what I’m talking about.
- A list of tutorials gathered by Nuxt community
So if you’re using Vue, you might want to try Nuxt.