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: