質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

1567閲覧

Nuxt.jsのlayoutsでcomponentsを読み込みたい

kaji120

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2021/05/07 22:22

前提・実現したいこと

headerとfooterを画面に表示させたいです。

発生している問題・エラーメッセージ

importなし

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <wel-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Layouts/welcome.vue> at layouts/welcome.vue <Root>

importあり

/app/layouts/welcome.vue 71:1 error `../components/beforeLogin/befLoginFooter.vue` import should occur before import of `~/components/welcome/welAbout` import/order 72:1 error `../components/welcome/welAppBar.vue` import should occur before import of `~/components/welcome/welAbout` import/order

該当のソースコード

layouts/welcom.vue※importあり

layouts

1<template> 2 <v-app> 3 <wel-app-bar /> 4 5 <v-img 6 dark 7 src="https://picsum.photos/id/20/1920/1080?blur=5" 8 gradient="to top right, rgba(19,84,122,.6), rgba(128,208,199,.9)" 9 :height="imgHeight" 10 > 11 <v-row 12 align="center" 13 justify="center" 14 :style="{ height: `${imgHeight}px` }" 15 > 16 <v-col 17 cols="12" 18 class="text-center" 19 > 20 <h1 class="display-1 mb-4"> 21 未来を作ろう。ワクワクしよう。 22 </h1> 23 <h4 24 class="subheading" 25 :style="{ letterSpacing: '5px' }" 26 > 27 中小企業に特化した事業計画策定ツール 28 </h4> 29 </v-col> 30 </v-row> 31 </v-img> 32 33 <v-sheet> 34 <v-container 35 fluid 36 :style="{ maxWidth: '1280px' }" 37 > 38 <v-row 39 v-for="(menu, i) in menus" 40 :key="`menu-${i}`" 41 > 42 <v-col 43 cols="12" 44 > 45 <v-card flat> 46 <v-card-title class="justify-center display-1"> 47 {{ $t(`menus.${menu.title}`) }} 48 </v-card-title> 49 <v-card-text class="text-center"> 50 {{ menu.subtitle }} 51 </v-card-text> 52 </v-card> 53 </v-col> 54 55 <v-col cols="12"> 56 <div :is="`wel-${menu.title}`" /> 57 </v-col> 58 </v-row> 59 </v-container> 60 </v-sheet> 61 <bef-login-footer /> 62 </v-app> 63</template> 64 65<script> 66import welAbout from '~/components/welcome/welAbout' 67import welProducts from '~/components/welcome/welProducts' 68import welPrice from '~/components/welcome/welPrice' 69import welContact from '~/components/welcome/welContact' 70import welCompany from '~/components/welcome/welCompany' 71import BefLoginFooter from '../components/beforeLogin/befLoginFooter.vue' 72import WelAppBar from '../components/welcome/welAppBar.vue' 73export default { 74 components: { 75 welAbout, 76 welProducts, 77 welPrice, 78 welContact, 79 welCompany, 80 BefLoginFooter, 81 WelAppBar 82 }, 83 data () { 84 return { 85 imgHeight: 500, 86 menus: [ 87 { title: 'about', subtitle: 'このサイトはブログ"独学プログラマ"で公開されているチュートリアルのデモアプリケーションです' }, 88 { title: 'products', subtitle: '他にはない優れた機能の数々' }, 89 { title: 'price', subtitle: '会社の成長に合わせた3つのプラン' }, 90 { title: 'contact', subtitle: 'お気軽にご連絡を' }, 91 { title: 'company', subtitle: '私たちの会社' } 92 ] 93 } 94 } 95} 96</script> 97

components/welocom/welAppBar.vue

components

1<template> 2 <v-app-bar 3 app 4 dark 5 > 6 <v-toolbar-title> 7 {{ appName }} 8 </v-toolbar-title> 9 </v-app-bar> 10</template> 11 12<script> 13export default { 14 data ({ $config: { appName } }) { 15 return { 16 appName 17 } 18 } 19} 20</script>

components/befLogin/befLoginFooter

components

1<template> 2 <div> 3 <v-footer 4 absolute 5 dark 6 color="black" 7 > 8 befLoginFooter.vue 9 </v-footer> 10 </div> 11</template> 12 13<script> 14export default { 15} 16</script> 17

nuxt.config.js

nuxtconfig

1export default { 2 mode: 'spa', 3 4 // Doc: https://ja.nuxtjs.org/blog/going-full-static/ 5 target: 'server', 6 7 head: { 8 title: process.env.npm_package_name || '', 9 meta: [ 10 { charset: 'utf-8' }, 11 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 13 ], 14 link: [ 15 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 16 ] 17 }, 18 loading: { color: '#fff' }, 19 20 css: [ 21 '~/assets/sass/main.scss' 22 ], 23 24 plugins: [ 25 'plugins/axios' 26 ], 27 28 29 // Doc: https://nuxtjs.org/api/configuration-components 30 components: true, 31 32 buildModules: [ 33 // Doc: https://github.com/nuxt-community/eslint-module 34 '@nuxtjs/eslint-module', 35 '@nuxtjs/vuetify' 36 ], 37 38 modules: [ 39 // Doc: https://axios.nuxtjs.org/usage 40 '@nuxtjs/axios', 41 'nuxt-i18n' 42 ], 43 44 // public ENV 45 // Doc: https://nuxtjs.org/guide/runtime-config/ 46 publicRuntimeConfig: { 47 appName: process.env.APP_NAME 48 }, 49 50 axios: { 51 }, 52 53 vuetify: { 54 55 treeShake: true, 56 customVariables: ['~/assets/sass/variables.scss'], 57 theme: { 58 themes: { 59 light: { 60 primary: '4080BE', 61 info: '4FC1E9', 62 success: '44D69E', 63 warning: 'FEB65E', 64 error: 'FB8678', 65 background: 'f6f6f4' 66 } 67 } 68 } 69 }, 70 71 i18n: { 72 locales: ['ja', 'en'], 73 defaultLocale: 'ja', 74 // Doc: https://kazupon.github.io/vue-i18n/api/#properties 75 vueI18n: { 76 fallbackLocale: 'ja', 77 // silentTranslationWarn: true, 78 silentFallbackWarn: true, 79 messages: { 80 ja: require('./locales/ja.json'), 81 en: require('./locales/en.json') 82 } 83 } 84 }, 85 build: { 86 } 87}

package.json

Json

1{ 2 "name": "app", 3 "version": "1.0.0", 4 "private": true, 5 "scripts": { 6 "dev": "nuxt", 7 "build": "nuxt build", 8 "start": "nuxt start", 9 "export": "nuxt export", 10 "serve": "nuxt serve", 11 "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", 12 "lint": "yarn lint:js" 13 }, 14 "dependencies": { 15 "@nuxtjs/axios": "^5.13.1", 16 "core-js": "^3.9.1", 17 "nuxt": "^2.15.3", 18 "nuxt-i18n": "^6.26.0" 19 }, 20 "devDependencies": { 21 "@nuxtjs/eslint-config": "^6.0.0", 22 "@nuxtjs/eslint-module": "^3.0.2", 23 "@nuxtjs/vuetify": "^1.11.3", 24 "babel-eslint": "^10.1.0", 25 "eslint": "^7.22.0", 26 "eslint-plugin-nuxt": "^2.0.0", 27 "eslint-plugin-vue": "^7.7.0" 28 } 29} 30

試したこと

・ファイル名の確認
・nuxt.config.jsのcomponents: trueの確認

補足情報(FW/ツールのバージョンなど)

Nuxt 2.15.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

検索ワードを変えて検索したところ
バージョン2.15- からはディレクトリ名も含める必要がありました

投稿2021/05/08 01:22

kaji120

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問