DEV Community

Cover image for Install Nuxt 3 Project
Irfan Hardiyanto
Irfan Hardiyanto

Posted on • Edited on

2

Install Nuxt 3 Project

Hey there! Ready to start your journey with Nuxt 3? It's a fantastic framework for building Vue.js applications. Let's walk through the installation process in a way that's super easy to follow and fun to do. We'll use NVM (Node Version Manager) to keep things simple.

What You Need

  1. Node.js and NPM: Nuxt 3 requires Node.js and npm (Node Package Manager). We'll use NVM to manage the Node.js versions.
  2. NVM: Node Version Manager helps you install and manage different versions of Node.js easily.

Step-by-Step Installation

1. Install NVM

First, we need to install NVM. Open your terminal and run the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

Then, activate NVM by adding the following lines to your profile (.bashrc, .zshrc, or .profile):

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Enter fullscreen mode Exit fullscreen mode

After that, restart your terminal or source your profile:

source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode
2. Install Node.js

Now that NVM is installed, let's use it to install the latest stable version of Node.js:

nvm install node
Enter fullscreen mode Exit fullscreen mode

To ensure you're using the latest version:

nvm use node
Enter fullscreen mode Exit fullscreen mode
3. Create a New Nuxt 3 Project

With Node.js and npm ready, it's time to create a new Nuxt 3 project. Run the following commands:

npx nuxi init my-nuxt3-app
cd my-nuxt3-app
npm install
Enter fullscreen mode Exit fullscreen mode
4. Start the Development Server

Now, let's fire up the development server and see our new Nuxt 3 app in action:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open your browser and navigate to http://localhost:3000. You should see your Nuxt 3 application running!

Example Code Snippet

Here's a simple example of what your pages/index.vue file might look like:

<template>
  <div>
    <h1>Welcome to My Nuxt 3 App!</h1>
    <p>This is a simple Nuxt 3 application.</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: #3498db;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Wrapping Up

And that's it! You've successfully set up a Nuxt 3 project using NVM to manage Node.js. This setup ensures that your development environment is clean and up-to-date. Now, go ahead and start building awesome applications with Nuxt 3!

If you run into any issues or have any questions, feel free to reach out. Happy coding!


Reference:

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay