![見出し画像](https://assets.st-note.com/production/uploads/images/52044476/rectangle_large_type_2_fc4ae53d3360e38236127ac67f0eb5c0.png?width=1200)
【Nuxt.js】コンポーネントを自動インポートしよう
🎈 この記事はWP専用です
https://wp.me/pc9NHC-1iI
前置き
コンポーネントを呼び出す際は
この2つが必要ですよね?💡
・import文
・componentsフィールドの定義
<template>
<div class="page">
<ButtonDefault />
</div>
</template>
<script>
import ButtonDefault from '~/components/ButtonDefault'
export default {
components: {
ButtonDefault,
},
}
</script>
しかしこれって意外と面倒です😑🌀
ファイルパスの確認や
スペルミスがないか
チェックしなければなりません。
この手間を減らしましょう!
⬇️これだけで呼び出せます✨
2つの工程を減らせるんです🧹♪
<template>
<div class="page">
<ButtonDefault />
</div>
</template>
<script>
export default {
}
</script>
いちいちimportするのが面倒くさい!
1階層で管理には充分、参考にしたい!
という方は本記事をご覧ください👀
参考:
@nuxt/componentsを使って、コンポーネントを自動でimportしよう
Nuxtのアップグレード
##アップグレードをする理由
公式を確認すると
v2.13以降は@nuxt/components
というモジュールがインストールされ
自動でインポートできるということです💫☝️
v2.13 以降、Nuxt はテンプレートで使用される時にコンポーネントを自動でインポートできます。
コンポーネントの発見
ということでNuxtを
v2.13以降にアップグレードすればOK⭕️
##アップグレードの手順
この手順で進めてください🍒
アップグレード
あとはバージョンチェックと
プロジェクトを実行して
エラーがなければOK⭕️
// terminal
$ npx nuxt -v
$ npm run dev
自動でインポートする(components直下の場合)
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-1iI
この記事が気に入ったらサポートをしてみませんか?