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

前提・実現したいこと

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