Getting Started With Nuxt.js - The How & Why

#vue #javascript #codenewbie #nuxt

What is Nuxt.js

Nuxt.js is an intuitive vue.js framework (yeah, a framework’s framework) for building faster and scalable - static, server-side rendered (SSR) & single page applications (SPA’s).
Nuxt.js is lovable because its included with vue core plugins by default (vue-router, vuex, vue-head,...), so no extra effort in installing them.

Features (why 🤷🏽):

Auto import component: You do not have to...

import componentName from ‘componentFolder’
export default {
  components: {
     componentName
   }

...for each of your components. Nuxt.js does that for you already, all you need do is keep all of your components in a folder and you could start referencing them anywhere in your application without doing the extra import.

P.S: there’s an option to disable this feature, in a case where you’re not interested in using it.

Auto generate router: Yeah, routers are also generated automagically. For every new page or page/:slug you create, the routers are immediately generated/updated (awesome right?).
Middleware support: Nuxt.js makes authentication in a vue.js based application seamlessly easy. You get to easily create and specify which middleware belongs to what page.
More awesome features: The why list is literally endless. There are more features that nuxt.js provide for each pages, for example asyncData - that lets you render data before your page is mounted into view. But these features won’t be covered in this article, another one maybe.

Installation (How 🚀):

Nuxt.js can be installed by downloading the nuxt package from npm via:

npm install nuxt —- save

But, with this installation process, you’ll need to go through an extra step of creating the nuxt configuration file plus the folders required for your application (which is quite exhausting, IMO).

Another option is using - create-nuxt-app : an npx package created by the nuxt community.
With this installation option, you will be prompted to select your type of application (SPA, SSA or static), select a front-end framework (bootstrap, vuetify or tailwind css) plus your preferred test and linting tool. And the nuxt configuration file will be generated automatically for you along with a sample nuxt.js application.

Getting Started

Lets go ahead and create a basic Nuxt.js application. Open your terminal/command line CD to your project folder and...

npx create-nuxt-app sample-project

Select rendering mode: Here you select the type of application you are building. Universal - support for server side rendered applications. And Single page application - For static/JAMStack based application.
Deployment target - Here you specify how your application will be deployed. Static for Jamstack based hosting (like Netlify, github pages) and Server for Node.js based hosting (like Heroku and AWS). The other required information are quite descriptive, like selecting programming language of choice (JavaScript/typescript), front-end framework and other related stuffs.

After completing the above installation process, lets go ahead and open the project in your text-editor. I use vscode, so -

cd sample-project
code .

Directory structure

.nuxt/ - This folder is automatically generated and regenerated any time you start/build your projects - this is where routers, middleware and other related configs are created. we shouldn’t worry so much about this.
assets/ - This is where you keep your un-compiled assets including images, CSS, sass and fonts files.
components/ - This is where you keep your components files, of course.
pages/ - This folder contains your application views and routes, Nuxt.js reads all the .vue files inside this directory and automagically creates the router configuration for you.
static/ - Here you keep static files that likely won't be changed. Unlike the assets dir, these files will be accessible through your project root URL. For example: /static/robots.txt will be available at http://localhost:3000/robots.txt
nuxt.config.js - This file contains nuxt based configuration settings, here we can easily configure the default head (title, meta-tags) for each pages, add a global css file, configure build option, and many more.

Running/Building

To run our app locally, all we need do is:

npm run dev

And our app should be served at http://localhost:3030 (or some other port, if :3030 is unavailable).

If you’re building a static site, the distribution files can be generated by running..

npm run generate

After the build is completed, a new dist/ folder will be created in your root directory. The content of this folder is what you host on your preferred platform - Netlify, GitHub pages, e.t.c.

And if you are building a server side rendered application (SSR), here is an extensive article that should be helpful.