But what is it? Well, on their page they say:
Nuxt — Universal Vue.js Applications
That means you can have your SPA (Single Page Application) + SSR (Server Side Rendering).
As I see it, it’s an opinionated framework for building web apps on top of Vue.js.
A convention over configuration type of framework, if you will.
Knowing your way around
vue-cli apps first, will certainly help you understand what
Nuxt.js does for you.
Nevertheless, what really caught my eye was the fact that it can be used as a Static Site Generator too!
Right now, I’m exploring the idea of using it as the basis for this blog, because:
So, what follows is a step-by-step guide into getting a new Nuxt.js app up and running with Vuetify support.
If you are looking for a guide on how to setup a normal
vue-cli application, check this one out:
Quickstart guide for a new Vue.js project.
If you are exploring alternatives in this space, here is a couple of links for you:
To create a new Nuxt.js app, type this in your terminal:
yarn create nuxt-app my-app
This is equivalent to:
yarn global add create-nuxt-app create-nuxt-app my-app
If the command
create-nuxt-app is not available to you in the CLI, don’t forget
asdf reshim nodejs.
It’ll ask you some questions like:
? Project name my-app ? Project description My stupendous Nuxt.js project ? Use a custom server framework none ? Use a custom UI framework vuetify ? Choose rendering mode Single Page App ? Use axios module yes ? Use eslint yes ? Use prettier no ? Author name Víctor Adrián
I choose the rendering mode as Single Page App instead of Universal because I want a statically generated site, and don’t want to depend on a Node.js environment for my app to work.
Start the development server:
cd my-app/ yarn dev
Now, open your browser and visit:
You’ll see something like:
yarn add pug pug-plain-loader node-sass sass-loader --dev
Just see how concise and lean is the Pug version compared to its HTML counterpart.
pages/inspire.vue, from this:
<template> <v-layout> <v-flex text-xs-center> <img src="/v.png" alt="Vuetify.js" class="mb-5"> <blockquote class="blockquote"> “First, solve the problem. Then, write the code.” <footer> <small> <em>—John Johnson</em> </small> </footer> </blockquote> </v-flex> </v-layout> </template>
<template lang="pug"> v-layout v-flex(text-xs-center) img(src="/v.png" alt="Vuetify.js").mb-5 blockquote.blockquote span. “First, solve the problem. Then, write the code.” footer small em —John Johnson </template> <style lang="sass" scoped> .blockquote background-color: #bf0051 </style>
Point your browser to:
http://localhost:3000/inspire and you’ll see:
Now, go write great Vue.js apps!
Nuxt.js offers an interesting —and opinionated— way for implementing Vue.js apps.
I’ll definitely keep poking around and see if it can cover all the use cases for the next iteration of my blog.
Get in touch on Twitter
Or by good ol' email at