How to use script setup in Nuxt 2

If you’re like me and love ❤️ the new “script setup” syntax, you’ve probably been wondering when we could start using it on our current Nuxt (2) projects. Well, the wait is over! Thanks to the Nuxt team, now it’s possible. Let’s see how, but first...

# What is script setup?

<script setup> refers to the latest Vue API for authoring components. It is the recommended syntax if you're using the Composition API in Single File Components (SFC). This is what it looks like:

<script setup>
const msg = 'Hello world'
</script>

<template>
  <p>{{ msg }}</p>
</template>

# How to use it in a Nuxt 2 app:

If you want to use it in an existing Nuxt (v2) application, you have two options:

• Use the Composition API Nuxt module, @nuxtjs/composition-api.
• Or start migrating Nuxt with Nuxt Bridge.

# Option 1: Composition API Nuxt module

Starting in v0.28.0, the Composition API Nuxt module includes unplugin-vue2-script-setup which enables the <script setup> syntax out of the box.

First, you will need to install the Composition API Nuxt module if you don’t have it yet (or update it to v0.28.0 or higher). You can see the docs here.

npm i @nuxtjs/composition-api

Then, add it in nuxt.config.js, under buildModules:

{
  buildModules: [
    // https://composition-api.nuxtjs.org/getting-started
    '@nuxtjs/composition-api/module',
  ],
}

After that, you can start using <script setup> in Nuxt component and pages:

<template>
  <p>{{ awesome }}</p>
</template>

<script setup>
// *In Nuxt 3 apps you can omit importing Composition API methods*
import { ref } from '@nuxtjs/composition-api';

const awesome = ref('Look, ma, script setup!!')
</script>

That’s it!

Only downside I see is that adding a JavaScript library makes your JS bundle bigger. So, it needs to be justified. More on that later.

# Option 2: Nuxt Bridge

Nuxt Bridge is a Nuxt module that allows you to use the Nuxt 3 features of tomorrow into your Nuxt 2 application today. It sits between Nuxt v2 and v3, backporting Nuxt v3 features into Nuxt v2. Straight from the docs:

Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and have the best developer experience without needing a major rewrite or risk breaking changes.

Migrating your Nuxt app to Nuxt Bridge also requires changing your nuxt dependency into nuxt-edge@latest. Fortunately, the Nuxt team has put together an installation guide. I recommend you follow all the steps described in that link.

Regarding the current status of the different Nuxt builds –Nuxt 2, Nuxt Bridge, Nuxt 3– you can refer to this table for a comparison between them. At least, at the current state, the Nuxt team agrees that:

Nuxt Bridge is more stable than Nuxt 3 at the moment (– Feb 2022)

# Conclusion

At least for me, <script setup> is *the way* of writing Vue components from now on.

• For me, it’s more fun to follow function composition patterns. Basing your logic on pure functions makes the app easier to test and maintain.
• Generally, you will need fewer lines of code to achieve the same results as we used to with the Options API.
• Everything comes up nicely organised if you group your logic by features.
• Script setup also brings a better developer experience because it has a better TypeScript IDE integration.
• One of the biggest benefits for me is that I no longer need to remember to add things in the returned object of the setup() function with the traditional Composition API. 😅

Being able to use this modern syntax today in a Nuxt 2 app is a complete bliss. ✨🚀

# Demo

I’ve prepared a live demo so you can play, watch, and even break the code all by yourself.