ターゲット
Vue 2 / Nuxt 2 で <script setup> を素振り or 導入したい方
unplugin-vue2-script-setup の紹介
VueUse などの開発者である@antfu7さんが開発された、次のプラグインを適用すると Vue2 / Nuxt2 で <script setup> が使用可能となります。
README.mdの通り、次のエコシステムにも対応されています。
- Vite
- Nuxt
- Vue CLI
- webpack
- Rollup
- Jest
- JavaScript API
ハマったことの共有
<script setup> の素振りのため unplugin-vue2-script-setup を次のリポジトリ(Nuxt2)へ導入しました。
-
https://github.com/zakizaki-ri9/blog
-
<script setup>使用箇所 - components/PostDateTime.vue
- pages/index.vue
- pages/posts/_datetime/_slug.vue
-
unplugin-vue2-script-setup というより <script setup> を適用する上でハマったことが2点ありましたので、参考までに共有します。
<script setup> 内に定義した変数が no-unused-vars となる
eslint-plugin-vue が <script setup> 構文に対応したのは v7.16.0 のため、バージョンが古いです。
- #1602 Fixed false positives for namespace component in vue/script-setup-uses-vars rule.
v7.16.0 以降のバージョンに更新しましょう。
<script setup> で defineComponent を使用したい
👆 のようなケースです。
Issue 内のコメント通り、<script setup> と <script> を併用して回避します。
参考
そもそも <script setup> とは
Vue.js 3.2で使用可能となった構文です。
前述から抜粋すると、次のようなメリットがあります。
- 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)
また、公式の内容を咀嚼した、次の記事を併せて読むと理解がはかどるかと思います。
Discussion