// vite.config.ts
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'

export default defineConfig({
  plugins: [
    Vue2(),
    ScriptSetup({ /* options */ }),
  ],
})

Example: playground/

From v0.28.0 of @nuxtjs/composition-api, this plugin is included and enabled out-of-box.

npm i @nuxtjs/composition-api

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
  ],
  scriptSetup: { /* options */ },
}

This module works for both Nuxt 2 and Nuxt Vite

Example: examples/nuxt

Component Meta

Note that <script setup> could co-exist with <script>, if you want to define component metadata like layout or head for Nuxt, you can do it this way:

<script setup lang="ts">
// your script setup
</script>

<script lang="ts">
// the normal script
export default {
  layout: 'user',
  // ...other meta
}
</script>

TypeScript

To use TypeScript with Nuxt, install the @nuxtjs/typescript-module but disable the type check:

npm i -D @nuxt/typescript-build vue-tsc

// nuxt.config.js
export default {
  buildModules: [
    ['@nuxt/typescript-build', { typeCheck: false }],
    '@nuxtjs/composition-api/module',
    'unplugin-vue2-script-setup/nuxt',
  ],
}

And then use vue-tsc to do the type check at build time:

// package.json
{
  "scripts": {
    "dev": "nuxt",
    "build": "vue-tsc --noEmit && nuxt build"
  }
}

// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false,  // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
}

Example: examples/vue-cli

TypeScript

To use TypeScript with Vue CLI, install @vue/cli-plugin-typescript but disable the type check:

npm i -D @vue/cli-plugin-typescript vue-tsc

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
  parallel: false,
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete('fork-ts-checker')
  },
}

And then use vue-tsc to do the type check at build time:

// package.json
{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-tsc --noEmit && vue-cli-service build"
  }
}

// webpack.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
  /* ... */
  plugins: [
    ScriptSetup({ /* options */ }),
  ]
}

// rollup.config.js
import Vue from 'rollup-plugin-vue'
import ScriptSetup from 'unplugin-vue2-script-setup/rollup'

export default {
  plugins: [
    Vue(),
    ScriptSetup({ /* options */ }),
  ]
}

// esbuild.config.js
import { build } from 'esbuild'
import ScriptSetup from 'unplugin-vue2-script-setup/esbuild'
build({
  /* ... */
  plugins: [
    ScriptSetup({
      /* options */
    }),
  ],
})

npm i -D vue-jest

// jest.config.js
module.exports = {
  transform: {
    '.*\\.(vue)

: 'unplugin-vue2-script-setup/jest',
  },
}

import { transform } from 'unplugin-vue2-script-setup'

const Vue2SFC = transform(`
<template>
  <!-- ... -->
</template>

<script setup>
  // ...
</script>
`)

In v0.5.x, we shipped the experimental Ref Sugar (take 2) implementation based on Vue 3's @vue/reactivity-transform package. Notice the syntax is not settled yet and might be changed in the future updates. Use at your own risk!

To enabled it, pass the option:

ScriptSetup({
  reactivityTransform: true
})

To get TypeScript support, update your tsconfig.json with:

{
  "compilerOptions": {
    "types": [
      "unplugin-vue2-script-setup/types",
      "unplugin-vue2-script-setup/ref-macros"
    ]
  }
}

It's made possible by transforming the <script setup> syntax back to normal <script> and let the Vue 2 SFC compiler handle the rest.