failed to mount Component: template or render Function not defined with Vue.js

Question

OBS:Please do not notify me negatively for this post, because it has similarity to another recent post, this is a specific problem.

Click on my Video

I’m trying to refactor my layout using vue.js, I mean, it’s a kind of code reuse, for example! I have a main page and I would like to take advantage of the menu that was built on it on a secondary page, instead of duplicating code, I simply create a bridge to reference a code that already exists on the secondary page, and automatically enter a code already built in the main page.

Look at the structure of my project, it was done in the editor atom.

You may notice that I created the main page inside the layout folder with the name of base.vue and the next step would be to reference it on the secondary page, but the method is not recognized by the vue.js and would like to know why this is happening.

components: {
       VLayout: require('@/layouts/base'),

    },

I know this because I tried to upload the application on my local server and when I went to view the page nothing appeared, when I went to inspect the page on the consoles of Google Chrome it returned me this error;

What you’re saying is that the VLayout in the project.

But how can not locate the method is on the secondary page and the main page exists in the correct location?

accept suggestions!

This is my page base.vue is inside the layout folder;

<template>
  <div>
    <v-header>
      <v-toolbar>
        <v-nav-icon @click.native="toggleDrawer" />
        <v-toolbar-title>Music DB</v-toolbar-title>
        <v-toolbar-actions>
          <v-toolbar-action>
            <v-icon>exit_to_app</v-icon>
          </v-toolbar-action>
        </v-toolbar-actions>
      </v-toolbar>
      <transition name="slide-left">
        <v-drawer v-if="drawerActive">
          <v-drawer-header>
            <v-nav-icon
              variant="green"
              @click.native="toggleDrawer"
            />
            <v-drawer-title>Music DB</v-drawer-title>
          </v-drawer-header>
          <v-drawer-body>
            <v-navigation>
              <v-navigation-item>
                <v-navigation-link :route="{ name: 'artists.index' }">
                  <v-navigation-content>Artists</v-navigation-content>
                </v-navigation-link>
                <v-navigation-link :route="{ name: 'albums.index' }">
                  <v-navigation-content>Albums</v-navigation-content>
                </v-navigation-link>
                <v-navigation-link :route="{ name: 'songs.index' }">
                  <v-navigation-content>Songs</v-navigation-content>
                </v-navigation-link>
              </v-navigation-item>
            </v-navigation>
          </v-drawer-body>
          <v-drawer-footer>For educational purposes only</v-drawer-footer>
        </v-drawer>
      </transition>
    </v-header>
    <v-content>
      <!-- The content of the page will be placed here -->
      <slot></slot>
    </v-content>
    <transition name="fade">
      <v-overlay
        v-show="drawerActive"
        @click.native="hideDrawer"
      />
    </transition>
  </div>
</template>
<script>
  export default {
    /**
     * The name of the layout.
     */
    name: 'base-layout',

    data() {
      return {
        drawerActive: false,
      };
    },

    /**
     * The methods which the layout can use.
     */
    methods: {
      /**
       * Method used to hide the drawer.
       */
      hideDrawer() {
        this.drawerActive = false;
      },

      /**
       * Method used to toggle the drawer.
       */
      toggleDrawer() {
        this.drawerActive = !this.drawerActive;
      },
    },
  };
</script>

this is my page index

<template>
  <v-layout>
      <v-grid variant="container">
        <v-row variant="xs-center">
          <v-col :variants="['xs-9', 'md-4', 'lg-3']">
            <v-card>
              <v-card-body>
                <v-form @submit.prevent.native="setQuery(query)">
                  <v-input-group>
                    <v-icon variant="signifier">search</v-icon>
                    <v-text-field
                      variant="with-signifier"
                      v-model="query"
                      placeholder="Find artist"
                    />
                  </v-input-group>
                </v-form>
              </v-card-body>
            </v-card>
          </v-col>
          <v-col :variants="['xs-3', 'md-4', 'lg-3', 'md-offset-4', 'lg-offset-6']">
            <v-button
              variant="circle" class="pull-right"
              @click.native="redirectToCreatePage"
            >
              <v-icon>add</v-icon>
            </v-button>
          </v-col>
        </v-row>
        <v-row>
          <v-col variant="sm">
            <v-table>
              <v-table-header>
                <v-table-row>
                  <v-table-head>Name</v-table-head>
                  <v-table-head>Birthday</v-table-head>
                </v-table-row>
              </v-table-header>
              <v-table-body>
                <v-table-row
                  v-for="artist in artist.all"
                  :key="artist"
                  variant="body"
                >
                  <v-table-cell>
                    <router-link :to="getArtistRoute(artist.id)">{{ artist.fullName }}</router-link>
                  </v-table-cell>
                  <v-table-cell>{{ artist.birthday }}</v-table-cell>
                </v-table-row>
                <v-table-row v-if="artist.all.length === 0">
                  <v-table-cell colspan="3">Artists not found...</v-table-cell>
                </v-table-row>
              </v-table-body>
            </v-table>
          </v-col>
        </v-row>
        <v-row>
          <v-col variant="xs-justify">
            <v-card variant="inline">
              <v-card-body>
                <v-pagination
                  :pagination="artist.pagination"
                  :switch-page-function="setPage"
                  variant="small"
                />
              </v-card-body>
            </v-card>
            <v-card variant="inline">
              <v-card-body>
                <v-select
                  v-model="artist.pagination.limit"
                  :items="pageNumbers"
                />
              </v-card-body>
            </v-card>
          </v-col>
        </v-row>
      </v-grid>
  </v-layout>
</template>



<script>
  export default {
    /**
     * The name of the layout.
     */
    name: 'artist-index',

    data() {
      return {
        artist: {
          all: [],
          pagination: {
            totalCount: 0,
            totalPages: 0,
            currentPage: 1,
            limit: 5,
          },
        },
        drawerActive: false,
        query: null,
        pageNumbers: [
          5,
          10,
          15,
        ],
      };
    },

    /**
     * The methods which the layout can use.
     */
    methods: {
      /**
       * Method used to hide the drawer.
       */
      hideDrawer() {
        this.drawerActive = false;
      },

      /**
       * Method used to toggle the drawer.
       */
      toggleDrawer() {
        this.drawerActive = !this.drawerActive;
      },

      /**
       * Method used to get the artist route.
       *
       * @param {Number} id The artist identifier.
       *
       * @returns {Object} The artist route.
       */
      getArtistRoute() {
        // todo
      },

      /**
       * Method used to redirect the user to the artist create page.
       */
      redirectToCreatePage() {
        // todo
      },

      /**
       * Method used to go to a different page.
       *
       * @param {Number} page The page number.
       */
      setPage() {
        // todo
      },

      /**
       * Method used to set the limit of the items being displayed.
       *
       * @param {Number} limit The limit of items being displayed.
       */
      setLimit() {
        // todo
      },

      /**
       * Method used to set the query of the search bar.
       * The results will be debounced using the lodash debounce method.
       */
      setQuery() {
        // todo
      },
    },

    /**
     * Available watchers for this page.
     */
    watch: {
      query(query) {
        this.setQuery(query);
      },
    },

    components: {
       VLayout: require('@/layouts/base'),

    },
  };
</script>

=======================================================

I’m trying this way more is giving error! what would be the way to implement the console.log?

components: {

  const VLayout: require('@/layouts/base'),
  console.log(VLayout);

},