見出し画像

【Nuxt.js】コンポーネントを自動インポートしよう

#vue #nuxt #プログラミング #エンジニア  

🎈 この記事は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​

画像1


自動でインポートする(components直下の場合)

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-1iI

この記事が気に入ったらサポートをしてみませんか?