0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Nuxt.js】componentsディレクト内でネストされたコンポーネントをimportせずに使う方法

Last updated at Posted at 2021-12-26

はじめに

nuxt.js超初心者です。
nuxt.jsを勉強していて、layoutsディレクトリやpagesディレクトリでcomponentsディレクトリのコンポーネントを使う場合はimportなどの設定なしで使えると思うのですが、atomsディレクトリやmoleculesディレクトリに分けると使えなくなったので解決方法を調べました。
#解決方法
調べてみると解決方法は下記の2つがありました。
・コンポーネント呼び出すときにコンポーネント名にディレクトリ名を足す
・nuxt.config.jsファイルにコンポーネントの記載を足す

#コンポーネント呼び出すときにコンポーネント名にディレクトリ名をたす
下のようなcomponents/moleculesディレクトリ下にContentコンポーネントがあるとします。

~components/molecules/Content.vue
<template>
 <div>
  ゆっくり目を開き 目にするものをよォく見てみなさい
  敵の群を敵の顔を そして味方の顔を 天を地を
  これが将軍の見る景色です
 </div>
</template>

このContentコンポーネントを下記のようにpages/index.vue呼び出すとします。

~/pages/index.vue
<template>
 <div>
  <Content />
 </div>
</template>

これでは呼び出せません。
しかし下記のようにディレクトリ名を足すと呼び出すことができます。

~/pages/index.vue
<template>
 <div>
  <MoleculesContent />
 </div>
</template>

<Content />をそのまま使いたい場合は次の「nuxt.config.jsファイルにコンポーネントの記載を足す」方法を使っていただければと思います。

#nuxt.config.jsファイルにコンポーネントの記載を足す
タイトルの通りです。

nuxt.config.js
~~~省略~~~

components: {
    dirs: [
      '~/components',
      '~/components/atoms',
      '~/components/molecules',
      '~/components/organisms'
    ]
},

~~~省略~~~

上記のように設定を書き足すことでどこでもimportなしで<Conten />をそのまま呼び出すことができます。

~/pages/index.vue
<template>
 <div>
  <Content />
 </div>
</template>

以上です!!!!!
言語化って難しい…

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?