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

Node.js and NPM: Nuxt 3 requires Node.js and npm (Node Package Manager). We'll use NVM to manage the Node.js versions.
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

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"

After that, restart your terminal or source your profile:

source ~/.bashrc

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

To ensure you're using the latest version:

nvm use node

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

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

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>

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: