In this episode, we kick things off by getting Nuxt installed and setting up a brand new Nuxt 3 project. We walk through the process using the terminal: creating a fresh project with NPX, installing dependencies with npm, and opening up the project in a code editor. With everything in place, we run the Nuxt development server and check out our new app in the browser at localhost:3000
.
There's a quick intro to Vite—the build tool Nuxt uses under the hood—which makes development super speedy, letting us see our changes instantly. Even if you're new to Vite, don't sweat it: Nuxt takes care of almost everything for you.
Next, we take a little tour of the project directory. If you're coming from Nuxt 2, you'll notice things look a lot simpler at first—just a handful of files and folders. We go over the package.json
file, check out some of the built-in scripts (like npm run dev
), and open up app.vue
where the starter content lives. We also mention the special .nuxt
folder, which Nuxt uses for its own generated stuff—you can peek inside, but you don't need to mess with it.
To show how fast changes appear, we do a quick edit to the starter component, replace the welcome message with "home", and watch the browser update right away. We briefly try out Vue 3's <script setup>
syntax as well, which you'll see a lot more of throughout the series.
Finally, we mention that we'll soon explore Nuxt's file-based auto-routing system, so you won't need to build everything in app.vue
. With this foundation in place, you're all set to dive deeper into building with Nuxt 3 in the upcoming episodes!