Hello World- Your First Nuxt.js Project

Getting Started with Nuxt.js


Nuxt.js is a universal framework for creating Vue.js applications. It focuses on the UI Rendering aspect of development while abstracting away the client/server distribution. It simplifies the development of universal or single page Vue apps. 

Features in Nuxt

• Automatic Code Splitting
• Vue Powered
• Static File Rendering
• Hot Module Replacement
• Pre-processors: Sass, Stylus, Less
• Server-Side Rendering
• HTTP/2 Support


node – We recommend you have the latest LTS version installed.
text editor – We recommend VS Code.
terminal – We recommend using VS Code’s integrated terminal.

First Method: Use create-nuxt-app

Create a project
npx create-nuxt-app <project-name>

Navigate and launch to the project folder
cd <project-name>
npm run dev

Add the following content in index.vue file

Run on http://localhost:3000

This is the output.

Second Method: Manual Installation

Set up your project
mkdir <project-name>
cd <project-name>

Create the package.json file
touch package.json

Fill the content of your package.json 

Install Nuxt
npm install nuxt

Create your first page
mkdir pages

Create index.vue file
touch pages/index.vue

Add the following content in index.vue file

Start the project
npm run dev

Run on http://localhost:3000

This is the output.

Leave a Comment

Your email address will not be published. Required fields are marked *