How to setup a nuxt app

How to setup a nuxt app cover

Hi, this is aooo.io.

Introduction

In this first article I will explain why and how to setup a Nuxt app.

Nuxt is a great javascript framework that let you use vue.js to create your app and prerender it server side. Also, it can be used as static site generator. This has many benefits like:

  • Helping search engines crawlers to 'understand' the content presented on your web app even if you call async data !
  • Making development easier with a well organised file structure.
  • Performance increase.
  • Modular plugin system.

Why this article ?

It's part of my blog category "Nuxt in here". This is a big tutorial compilation where the subject is nuxt and aoooio implementation.

What we will see:

Let's go !

1.1 Requirement

Nuxt is a JS powered framework so make sure you have node.js installed along side npm. Node js site.

1.2 Vue CLI installation

Great, our system is now capable of installing vue CLI. This tool let you bootstrap nuxt project without doing more than typing a few commands.

On Ubuntu & OSX, open your terminal and type:

sudo npm install -g @vue/cli

On Windows:

npm install -g @vue/cli

Wait during npm is having fun and that's it, you can now use Vue CLI to bootstrap your project.

1.3 Start a new Nuxt project.

Vue CLI let you use a template to generate your project. The good news is that a nuxt template already exist to simplify our setup.

Let's use that in your terminal:

vue init nuxt-community/starter-template seo-nuxt

Then the CLI will ask you some questions to describe your project. You can just hit entre until the project is created with default options.

Now you can go in the project folder and install dependencies:

cd seo-nuxt
npm install

Npm has installed everything ? "BRAVO!" our project is now ready to launch:

npm run dev

Great ! You can now go to http://localhost:3000/ to see your local project running 🍾 🍾 🍾 .