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:
Top comments (0)