Hello World- Your First Nuxt.js Project

Getting Started with Nuxt.js

Introduction

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


Prerequisites

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 *

en_USEnglish