はじめに
nuxt.js超初心者です。
nuxt.jsを勉強していて、layoutsディレクトリやpagesディレクトリでcomponentsディレクトリのコンポーネントを使う場合はimportなどの設定なしで使えると思うのですが、atomsディレクトリやmoleculesディレクトリに分けると使えなくなったので解決方法を調べました。
#解決方法
調べてみると解決方法は下記の2つがありました。
・コンポーネント呼び出すときにコンポーネント名にディレクトリ名を足す
・nuxt.config.jsファイルにコンポーネントの記載を足す
#コンポーネント呼び出すときにコンポーネント名にディレクトリ名をたす
下のようなcomponents/moleculesディレクトリ下にContentコンポーネントがあるとします。
<template>
<div>
ゆっくり目を開き 目にするものをよォく見てみなさい
敵の群を敵の顔を そして味方の顔を 天を地を
これが将軍の見る景色です
</div>
</template>
このContentコンポーネントを下記のようにpages/index.vue呼び出すとします。
<template>
<div>
<Content />
</div>
</template>
これでは呼び出せません。
しかし下記のようにディレクトリ名を足すと呼び出すことができます。
<template>
<div>
<MoleculesContent />
</div>
</template>
<Content />をそのまま使いたい場合は次の「nuxt.config.jsファイルにコンポーネントの記載を足す」方法を使っていただければと思います。
#nuxt.config.jsファイルにコンポーネントの記載を足す
タイトルの通りです。
~~~省略~~~
components: {
dirs: [
'~/components',
'~/components/atoms',
'~/components/molecules',
'~/components/organisms'
]
},
~~~省略~~~
上記のように設定を書き足すことでどこでもimportなしで<Conten />をそのまま呼び出すことができます。
<template>
<div>
<Content />
</div>
</template>
以上です!!!!!
言語化って難しい…