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>
![](https://themoose.academy/wp-content/uploads/2022/08/x1.jpg)
Navigate and launch to the project folder
cd <project-name>
npm run dev
![](https://themoose.academy/wp-content/uploads/2022/08/image.png)
Add the following content in index.vue file
![](https://themoose.academy/wp-content/uploads/2022/08/image-1.png)
Run on http://localhost:3000
![](https://themoose.academy/wp-content/uploads/2022/08/image-13.png)
![](https://themoose.academy/wp-content/uploads/2022/08/image-3.png)
Second Method: Manual Installation
Set up your project
mkdir <project-name>
cd <project-name>
![](https://themoose.academy/wp-content/uploads/2022/08/image-4.png)
Create the package.json file
touch package.json
![](https://themoose.academy/wp-content/uploads/2022/08/image-5.png)
Fill the content of your package.json
![](https://themoose.academy/wp-content/uploads/2022/08/image-6.png)
Install Nuxt
npm install nuxt
![](https://themoose.academy/wp-content/uploads/2022/08/image-7.png)
Create your first page
mkdir pages
![](https://themoose.academy/wp-content/uploads/2022/08/image-8.png)
Create index.vue file
touch pages/index.vue
![](https://themoose.academy/wp-content/uploads/2022/08/image-9.png)
![](https://themoose.academy/wp-content/uploads/2022/08/image-10.png)
Add the following content in index.vue file
![](https://themoose.academy/wp-content/uploads/2022/08/image-11.png)
Start the project
npm run dev
![](https://themoose.academy/wp-content/uploads/2022/08/image-12.png)
Run on http://localhost:3000
![](https://themoose.academy/wp-content/uploads/2022/08/image-13.png)
![](https://themoose.academy/wp-content/uploads/2022/08/image-21.png)