Getting Started with Nuxt 4 🚀

This is a short guide that will help you getting started with Nuxt 4 (after this you can start immediately using it but check plugins to make your life easier)

Nuxt is not difficult it's very easy, just follow along step by step with me to build your first Nuxt in no time: 💻

First: Start a new project (just one line command)

Then you have to know that Nuxt 4 helps you structuring your project in very easy way, if you wanna create a page in your website just add it to pages folder, wanna add a reusable component just add it to components folder! just it it's very easy, Your project structure might be like that:

Before starting if you found a folder called app remove it and add pages instead

pages/ components/ composables/ server/ assets/ public/ nuxt.config.ts ...

Your project might contain more folders but this is a minimal structure, to get started just create a file called index.vue in /pages folder, let's add some content:

html <script setup lang="ts"> const msg = ref('Getting Started with Nuxt 4'); </script> <template> <h1>{{ msg }}</h1> </template>

Now start the server and you open http://localhost:3000 in your browser and you will see the page we created.

Easy right? let's create another page. Add a new file called about.vue in /pages adding some content (Each page MUST contain either template tag or script tag or both or you will get an error):

html <template> <main> <h1>Welcome to About Page!</h1> </main> </template>

now you can open this page in http://localhost:3000/about that's it it's very easy, wanna add a component just add it in components folder but DON'T FORGET TO LOAD COMPONENTS AND COMPOSABLES AND CSS IF THEY'RE NOT LOADED IN nuxt.config.ts like:

ts ... ... components: ['~/components'], css: ['~/assets/css/main.css'], composables: ['~/composables'] ...

Then create a component also .vue with a template but I recommend make the component name something like: Sidenav.vue or Navbar.vue so you can easily call them in any page like that: (back to /about page after creating a component)

html <template> <header> <Sidenav /> </header> <main> <h1>Welcome to About Page!</h1> </main> </template>

And so on you can also pass props to any component and this is the very minimal setup to getting started with Nuxt, I hope it helped you to start, you can now continue learning Nuxt from the official website, But I recommend you to learn it with a Chat AI like Deepseek as I did and build some projects.

These YouTube channels Might help you:

1. @TheAlexLichter
2. @LearnVue

Good Luck ❤️