If you’re looking to build fast, SEO-friendly, and scalable Vue.js applications, Nuxt 2 is a great choice. Whether you’re a beginner or an experienced developer, setting up Nuxt 2 is simple and straightforward. In this guide, we’ll walk you through the process of installing Nuxt 2 and getting started with your first project.
Step 1: Install Node.js and npm
Before installing Nuxt 2, ensure you have Node.js and npm (Node Package Manager) installed on your system. You can check if they are installed by running the following commands in your terminal:
node -v
npm -v
If Node.js is not installed, download it from Node.js official website and install the latest LTS version.
Step 2: Create a New Nuxt Project
To create a new Nuxt 2 project, open your terminal and run:
npx create-nuxt-app my-nuxt-app
Replace “my-nuxt-app” with your preferred project name. This command will prompt you to choose several options like package manager, UI framework, and server-side rendering mode. Select the options that best suit your needs.
Alternatively, if you prefer using yarn, you can run:
yarn create nuxt-app my-nuxt-app
Step 3: Navigate to Your Project Directory
Once the installation is complete, go to your project folder by running:
cd my-nuxt-app
Step 4: Start the Nuxt Development Server
To launch your Nuxt 2 application in development mode, use the following command:
npm run dev
or
yarn dev
This will start a local development server, and you can access your Nuxt app at:
http://localhost:3000
Step 5: Understanding the Nuxt Project Structure
After installation, your project directory will have the following structure:
- pages/ – Defines your application’s routes.
- components/ – Stores reusable Vue components.
- layouts/ – Defines app layouts.
- store/ – Handles state management (Vuex).
- nuxt.config.js – Nuxt configuration file.
This structure makes Nuxt applications easy to scale and maintain.
Step 6: Build and Deploy Your Nuxt App
When you’re ready to deploy your Nuxt application, build it for production using:
npm run build
Then, start the production server with:
npm start
Installing Nuxt 2 is quick and easy, making it an excellent choice for building modern web applications with Vue.js. By following the steps above, you can set up and start working with Nuxt in no time.
If you’re looking for expert web development services, CodeHunger can help you build high-performance applications with the latest technologies.
