📝

Vue / Nuxt 2系で <script setup> を使用するには unplugin-vue2-script-setup を導入する

2021/10/20に公開

ターゲット

Vue 2 / Nuxt 2 で <script setup> を素振り or 導入したい方

unplugin-vue2-script-setup の紹介

VueUse などの開発者である@antfu7さんが開発された、次のプラグインを適用すると Vue2 / Nuxt2 で <script setup> が使用可能となります。

https://github.com/antfu/unplugin-vue2-script-setup

README.mdの通り、次のエコシステムにも対応されています。

  • Vite
  • Nuxt
  • Vue CLI
  • webpack
  • Rollup
  • Jest
  • JavaScript API

ハマったことの共有

<script setup> の素振りのため unplugin-vue2-script-setup を次のリポジトリ(Nuxt2)へ導入しました。

unplugin-vue2-script-setup というより <script setup> を適用する上でハマったことが2点ありましたので、参考までに共有します。

<script setup> 内に定義した変数が no-unused-vars となる

eslint-plugin-vue<script setup> 構文に対応したのは v7.16.0 のため、バージョンが古いです。

https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.16.0

  • #1602 Fixed false positives for namespace component in vue/script-setup-uses-vars rule.

v7.16.0 以降のバージョンに更新しましょう。

<script setup>defineComponent を使用したい

https://github.com/antfu/unplugin-vue2-script-setup/issues/11

👆 のようなケースです。
Issue 内のコメント通り、<script setup><script> を併用して回避します。

参考

そもそも <script setup> とは

Vue.js 3.2で使用可能となった構文です。

https://v3.vuejs.org/api/sfc-script-setup.html

前述から抜粋すると、次のようなメリットがあります。

  • More succinct code with less boilerplate
  • Ability to declare props and emitted events using pure TypeScript
  • Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)
  • Better IDE type-inference performance (less work for the language server to extract types from code)

また、公式の内容を咀嚼した、次の記事を併せて読むと理解がはかどるかと思います。

https://zenn.dev/azukiazusa/articles/676d88675e4e74

GitHubで編集を提案
株式会社ビザスク

Discussion