Vue Basics

Nuxt integrates Vue 3, a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.

What you see in the editor is a Vue Single-File Component (SFC).

An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. It's composed with a <script setup> block to define the JavaScript logic, a <template> block to define the HTML template and optional <style> blocks to define the CSS style. You can play with it using the playground on the right, or read more about it in the official Vue documentation.

In Nuxt, we support Vue SFC out-of-the-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we auto-import the Vue utilities for you, so you can use ref, computed and other Vue APIs directly without importing them.

Tips: You might have heard that there are a few different ways to define a Vue component. In general, we recommend using <script setup> with Composition API to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.

Going forward, we will cover the following topics:

Welcome to Nuxt Tutorial!
This is an interactive tutorial that is composed with guides and challenges to help you learn Nuxt and its concepts step by step.
Reactivity Part 1
Vue provides a great reactivity system that tracks changes to the data and triggers updates automatically, allowing you to have your UI always up-to-date with the data. Vue's reactivity comes with a few primitives: ref, reactive, computed and watch.
Files
Editor
Initializing WebContainer
Mounting files
Installing dependencies
Starting Nuxt server
Waiting for Nuxt to ready
Terminal