DEV Community: Irfan Hardiyanto

Install Nuxt 3 Project

Irfan Hardiyanto — Thu, 04 Jul 2024 10:06:30 +0000

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:

Install New Laravel 11

Irfan Hardiyanto — Thu, 04 Jul 2024 10:05:24 +0000

So, you're ready to dive into the world of Laravel 11? Awesome choice! Laravel is a powerful PHP framework that makes web development a breeze. Let's break down the installation process in a way that's easy to understand and follow, no matter your operating system.

General Steps to Install Laravel 11

Install Composer: Laravel uses Composer to manage its dependencies. You need to have Composer installed on your system. You can download it from getcomposer.org.
Install Laravel via Composer: Once Composer is installed, you can install Laravel globally by running:
```
composer global require laravel/installer
```
Create a New Laravel Project: Navigate to your preferred directory and create a new Laravel project:
```
laravel new my-awesome-project
```
Navigate to Your Project Directory:
```
cd my-awesome-project
```
Serve Your Application: Start the development server:
```
php artisan serve
```

Recommended Tools for Different Operating Systems

Let's look at specific tools and setups for macOS, Linux (using WSL2 for Windows users), and Windows.

Operating System	Recommended Tool/App	Link
macOS	LaravelHerd	herd.laravel.com
Linux/WSL2	LAMP Stack	digitalocean.com
Windows	Laragon	laragon.org

Detailed Steps for Each Operating System

macOS: Using LaravelHerd

Download LaravelHerd: Get LaravelHerd from here.
Install LaravelHerd: Open the downloaded file and drag LaravelHerd to your Applications folder.
Run LaravelHerd: Open LaravelHerd from your Applications folder.
Use General step to deliver your own Laravel Applications.

Linux/WSL2: Using LAMP Stack

Install LAMP Stack: Follow the instructions on DigitalOcean to install the LAMP stack.

Install Composer:

sudo apt update
sudo apt install composer

Install Laravel via Composer:

composer global require laravel/installer

Create a New Laravel Project:
```
laravel new my-awesome-project
```

Serve Your Application:

cd my-awesome-project
php artisan serve

Windows: Using Laragon

Download Laragon: Get Laragon from here.
Install Laragon: Run the installer and follow the instructions.
Run Laragon: Open Laragon.
Create a New Laravel Project: Use Laragon’s quick app feature to create a new Laravel project.
Serve Your Project: Laragon will automatically serve your Laravel application.

That's it! You've got Laravel 11 up and running on your machine. Whether you're on macOS, Linux, or Windows, these tools make the process smooth and straightforward. Happy coding!

Reference:

Test Article

Irfan Hardiyanto — Fri, 19 Apr 2024 17:57:40 +0000

Testing description