TABLE OF CONTENTS

Nuxt.js – Push Your Vue App to the Next Level

Introduction

Current technological solutions allow us to create websites based on frameworks which save a lot of time. Websites based on frameworks such as Vue, React.js or Angular have an advantage of a lower server load cost and also, unfortunately, disadvantage – problem with rendering pages on the client side creates a problem with indexing pages in search engines.

What is Nuxt.js?

Nuxt.js is a framework for creating Vue.js applications, also in the main scope is UI rendering while abstracting away the client/server distribution. As a framework, it forces specified files structure which one will help you in your development application as Asynchronous Data, Middleware, Layouts, Pages and Routing and makes your app more scalable.

How nuxt.js can help you with SEO?

Nuxt.js can render out an application in three ways:

  1. Server Rendered (Universal SSR)
  2. Single Page Applications (SPA)
  3. Static Generated (Pre Rendering).

Below you can see how it renders Vue application:

how nuxt render vue

Project files structure:

Nuxt.js application files structure is created in a special way to provide a great starting point for both small and large applications.

  • assets – contains your un-compiled assets for example SCSS or JavaScript files
  • components – contains your Vue.js Components. Nuxt.js doesn’t supercharge the data method on these components
  • layouts – contains your Application Layouts (For example each layout file contains header and footer)
  • pages – contains your’s Views and Routes. Nuxt reads all the .vue files inside this directory and creates the application router list.
  • middleware – contains all middlewares with custom functions that can be run before rendering either a page or a group of pages (layouts)
  • plugins – contains your all Vue plugins that you want to run in your’s Application
  • static – all static files (for example images, txt)
  • store – here you should create your Vuex store as named index.js
  • nuxt.config.js – file contains your Nuxt.js application custom configuration

CONSIDERING MIGRATION TO REACT NATIVE?

Let’s create the first Nuxt.js app

1. To create first app we will use tool named create-nuxt-app.

Create-nuxt-app  tool requires npx (npx is shipped by default since NPM 5.2.0)

npx create-nuxt-app project-name

…or of course use Yarn:

yarn create nuxt-app my-project

After the answer to requests for a project name and description it will ask you some questions:

2. Choose between integrated server-side frameworks you can choose between:

  • none (nuxt server by default)
  • express
  • koa
  • adonis
  • hapi
  • feathers
  • micro

In this case, we will use option named none.

3. Next it will ask to choose between UI kit framework. Take your favorite or take none to create a custom style from scratch.

  • none (from scratch)
  • bootstrap
  • vuetify
  • bulma
  • tailwind
  • element-ui
  • buefy

4. In the third step you have to choose which one of rendering you want to use:

  • Universal
  • SPA (Single Page App)

In this case, we will use the Universal rendering mode.

5. In next steps it will ask, do you want to include in your project:

6. In the last step of installation, you decide the way of installation NPM or YARN.

After installation, you have to only move into the project folder and type command to run your first Nuxt.js project.

NPM:

npm run dev

YARN:

yarn dev

Then you will see loaders creates server and client environments:

server and client environments

If everything is done you should see screen like below:

successful screen

Now go to the link and you should see your first Nuxt.js server-side rendered webpage:

first nuxt server-side
code lines nuxt

Also, you can check for make a sure by right-clicking on the website and check View Page Source. Below picture presents view of my page source:

Summary

As you can see start project with using Nuxt.js is very simple and the benefits of using it are great. I hope you step further to the NUXT level.

CONSIDERING MIGRATION TO REACT NATIVE?

Marek Jakimiuk

Marek, a Frontend Developer at Pagepro since 2017, brings a unique blend of engineering precision and design passion to his role. Marek is known for his advocacy of user experience (UX). He consistently pushes for designs and functionalities that prioritise the user, making him a valuable asset to any project focused on delivering superior digital experiences.

Article link copied

Close button