DEV Community: Mario Laurich

Getting started with Nuxt.js

Mario Laurich — Thu, 06 Aug 2020 09:08:06 +0000

If you're building applications with Vue.js, you've probably heard of Nuxt.js. Vue already makes the development of JavaScript applications more convenient, but what's the idea behind Nuxt.js?

It's a progressive framework based on Vue.js. It simplifies the development of universal or single-page apps.

And this tutorial is all about, what Nuxt.js in detail is, which features you are getting, and how you can create your first project. Finally, you get an overview of the files and folder structure. There are some differences to a regular Vue.js project.

Do you prefer to watch a video about this topic?

What is Nuxt.js

Nuxt is based on Vue.js official libraries. That means on Vue, the Vue Router, Vuex. And also on powerful development tools like Webpack or Babel, for example. It extends Vue.js by some helpful features, and only with a few extra kilobytes added to your JavaScript files.

Nuxt makes creating universal apps easier.

What is a universal app?

A universal app can execute on both the client and the server-side.
If you create a single page application with Vue.js, you have a lot of benefits.

For example, you can make very snappy UIs that updates fast. But, and this is a problem, Google and other search engines struggle with them because there's no content initially on the page to crawl for SEO purposes.

All the content is rendered with JavaScript after the fact.

And with a universal app, you have instead of an index.html without content, a preloaded app on a web server that sends rendered HTML for every route to speed up load times and improve SEO by making it easier for search engines to crawl the page.

The next benefit is you can prerender your app to a static website. That's, in my opinion, the most significant innovation. You can create with the command nuxt generate a completely static version of your application.

npm run generate

It generates an HTML file for every route, and you have all the benefits of a universal app. But the difference is that you don't need a webserver anymore. Everything gets generated during the deployment period.

It's mighty because you get the benefits of universal rendering without the need for a server. You can host your app on GitHub Pages or a cloud service like Google Firebase. You could even host your website with Google Drive, without paying a single coin.

You are entirely free.

Create a new Nuxt.js project

You know we can create a new project with vue create and then the project-name if you use the vue cli service.

vue create project-name

But if you want to create a Nuxt project, we have to use another tool - npx.
The difference to npm is that npx is a tool to execute node.js packages. npm is only a manager for download and installing node packages.
And it's shipped by default since node package manager in version 5, and you don't have to install it separately.

But if you don't have it for some reason, you can install it with npm install -g npx, -g to install it globally.

npm install -g npx

Finally, you can create a new project with npx, and there is a scaffolding tool you can use, created by the Nuxt team, create-nuxt-app,
followed by a project name of your choice.

npx create-nuxt-app projectname

Now you have to choose different options, for example, setting which UI Framework you want to use or installing an additional module, like PWA or Axios. You can change everything later; It's totally up to you.

Generally, I highly recommend that if you start with new things, keep it simple and catch up with all the other stuff like test and UI frameworks later when you feel comfortable.

After that process, you can switch to the new project folder and run it with npm run dev, instead of serve.

npm run dev

Project Overview

If you look in your new directory structure for the first time, you will immediately notice that you can find a lot of new stuff. For comparison, a regular Vue project looks more comfortable at first. But all of this is justified because there are also some beneficial new patterns with all that stuff.

First, you have the assets folder. It's entirely the same as with Vue. You can store here all your static assets, your images, for example. But also uncompiled SCSS files, which you are using in the whole application. Also, the components directory sounds familiar. The name suggests, here is the place for all your components. For all? Not entirely. You have here only all the reusable components that you can use in your whole application. Components for the layout and pages have their own directories.

In the layouts folder is already a default.vue file with a template and some CSS definitions. New is the <nuxt /> tag

<template>
  <div class="container">
    <nuxt />  
  </div>  
</template>

It's a component provided by Nuxt, which renders the current route of your application. You can compare it to the router view component.

It's a fantastic pattern, in my opinion, because you can use more than one layout. For example, if you have a blog besides your main website, you can create for each part of your site, different designs based on these layout files. Distinct layouts for mobile and desktop it's also possible. It's a powerful pattern.

It's also the place where you can use the main navigation, a sidebar or the footer, entirely components, which are used by all routes of your application.

Next, we have the middleware folder.

Middlewares lets you define custom functions that can be run before rendering a page or a group of pages. Also importantly, the middleware has access to the context, which provides additional objects and params from your application.

As an example, you could evaluate the user agent according to the keyword mobile and use a different layout depending on the case. The result is then saved in the context so that it can be used later.

export default function(context) {
  let userAgent = context.req.headers['user-agent'];
  context.isMobile = /mobile/i.test(userAgent)
}

You have here also access to the Vuex store and the Vue Router.
That's amazing. You can create a navigation guard, where you can check an authentication status before the requested route is delivered.

You can do here a lot of great stuff. Very powerful.

The pages directory contains your application views and routes.
Nuxt reads all the .vue files inside this directory and creates the application router automatically.

And Nuxt provides for each component a bunch of additional attributes you can use. For example, which layout you want to use if you have some.
Or you can also use here the head attribute to define a custom title, description or meta tags for this page, and so on.
Nuxt uses here the plugin vue-meta for the head attribute, which is also available for a regular Vue.js project.

export default {
  head () {
    return {
      title: 'webnoob',
      meta: [
        { hid: 'description', name: 'description', content: '...' }
      ]
    }
  }
}

The plugins folder is the place where you can set up additional libraries like font-awesome, for example. But you can also create your reusable pieces of JavaScript code. Register components globally and to inject functions or constants could also be a possibility.

As an example, you can set up a new filter for displaying a date. If you register this plugin in your nuxt.config.js file, then you can use it easily in your templates with {{ date | formatdate }}.

import Vue from "vue";

Vue.filter("formatdate", function(value) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  const today  = new Date(value);

  return today.toLocaleDateString("en-US", options);
});

The static directory is directly mapped to the root folder from your application. So that's the place for your robot or sitemap files and so on.

The store directory contains your Vuex store files and comes with Nuxt.js out of the box but is disabled by default. Creating a javascript file in this directory enables the store. Nuxt.js lets you decide between 2 store modes at this time. The first one is with the index.js file, the classic way, which is also deprecated. So I highly recommend using the second mode with unique names, like todo.js or blog.js, which gets transferred to the Vuex namespace modules.

The nuxt.config.js file is the control center of your entire application.
You can change the mode, from universal to single page application and back. You are entirely free to change that on any time.

mode: 'universal',

But keep in mind, if you are using the spa mode, you can't use server-side rendering or any other special server handling.
On the other hand, in combination with the generate feature, it gives you a powerful deployment mechanism.

Furthermore, you have the default set up from the page head, which you can customize with additional meta tags or external resources like Google Fonts.

head: {
  title: process.env.npm_package_name || '',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
  ],
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon.ico' }
  ],
},

Nuxt gives you out of the box a loading progress bar component that's shown between routes. You can customize it, disable it, or create your own. Excellent feature, in my opinion.

loading: { color: '#fff' },

Below you can register additional global CSS files, plugins, and modules.

css: [
  { src: '@fortawesome/fontawesome-svg-core/styles.css' }
],
plugins: [
  { src: '~/plugins/font-awesome' },
  { src: '~/plugins/format-date' }
],
modules: [
  '@nuxtjs/pwa',
],

Conclusion

You have probably already noticed that we don't have here a main.js file or an App root component, right?

Well, you don't need it. Each component in the pages directory is basically a root component from a specific route. And the fantastic thing is you can for each route set up a different layout if you want.

Additional libraries and other javascript pieces, to register global components and other stuff, can you set up as a plugin.
To me, it all seems well organized and tidy.

Now it's your turn. Create your first Nuxt project today and play around with the new possibilities.
And if you want to see more, I already have a video tutorial about how you can create distinct layouts for mobile and desktop.

I open-sourced my Nuxt.js blog

Mario Laurich — Tue, 04 Aug 2020 13:30:48 +0000

I've implemented my new website/blog using Nuxt.js and deployed it on Netlify. Telmo inspired me with his fantastic clean-coded project to create my own. He built the blog telmo.im with Next.js(React) and markdown files.
Which is really sexy in my opinion. That's the short story.

In detail, I wanted my personal blog and with zero knowledge about React I looked into Telmo's GitHub Repo like a cow would look into the clockwork. But ok, it can't be that difficult, so I was curious about which dependencies he used and decided for me to start from scratch with a new Nuxt.js project.

Of course, there are some excellent headless CMS that I could use. But I found it a little over the top for a small blog like mine. It was also my wish to write new blog articles with markdown files, which then appear automatically. I chose @nuxt/content for this kind of job.

If you use the Node Package Manager, then can you inject it directly in your project with:

npm install @nuxt/content

Here are some features:

Blazing fast hot reload in development
Vue components in Markdown
Full-text search
Support static site generation with nuxt generate
Powerful QueryBuilder API (MongoDB like)
Syntax highlighting to code blocks in markdown files using PrismJS.
Handles Markdown, CSV, YAML, JSON(5)
Extend with hooks

That sounds fantastic to me and is more than what I wanted.
I highly recommend taking a look at the official documentation to get the stone rolling.
It's the first time I using it, and let me tell you it's freaking amazing. Thank you, Telmo for the inspiration.

Repository

You can find the repository here, and if you want to contribute to the project, you are very welcome to open pull requests.

If you want to use my project to code and build your own website, then go for it.

👉 Open Github

Change Navigation Based On View With Vue JS

Mario Laurich — Mon, 21 Oct 2019 07:43:32 +0000

My thoughts

Imagine, you have a website with a navigation, which is not responsive, and the goal is to build a mobile variation. How can you do this without CSS media queries? And what kind of benefits do you have with Vue JS?

Should be the mobile version utterly different from the desktop variation, starting from the HTML structure, over the functionality and until to the CSS styling, then, of course, the implementation can be quite difficult.
And if you wanna implement this with CSS media queries and many javascript conditions, for example, that can be a bit annoying and confusing.

So, in my opinion, it's a better solution to create a different Component for the mobile navigation and use the reactivity from Vue JS to switch between these components, based on the current viewport.

Handle the current view

The core idea is to check out the current innerWidth with your specific breakpoint and hold the status (true or false) in a local data attribute. In the App.vue Component or in the Component you want to handle the navigation.

methods: {
    handleView() {
        this.mobileView = window.innerWidth <= 990;
    }
}

Use your method

Next, you can use the created lifecycle hook and fire your method if the Component is created. Further, you have the opportunity to bind the method with an eventListener to the browser resize event.

This will allow you to run the method again if the user changes the browser size.

created() {
    this.handleView();
    window.addEventListener('resize', this.handleView);
}

And Now?

Now it's pretty easy to show either the mobile version or the normal navigation in your template depending on your mobileView status.

    <NavigationMobile v-if="mobileView" />
    <Navigation v-else />

My YouTube Tutorial about this topic

In this tutorial, I show you step by step, how you can implement this in a Vue JS project.

Conclusion

With this solution, you have both cleanly separated and can also use and adapt independently.

What are your thoughts?

Would you rather use CSS Media queries?

Thanks for reading and watching.