The project does not recognize the v-layout directive of vue.js

0

Greeting for all,

The opportunity to work as a Frond-End programmer appeared, and the team I'm working on said that I had to mess with Vue.js , it's a new technology that has appeared now. I'm following an online course, and in this course the teacher teaches how to make a rendered Layout using a v-layout directive, the problem is that it uses this feature in the video and it works, however in my project it does not work , I've been looking into the documentation of vue.js how to use it, and I have not found anything about the v-layout, if anyone has any doubt to know what a Layout Rendering is, I'll explain.

Let me explain how I did it on the project!

I created a folder in my project with the layout name and created a file called base.vue as shown in the figure below:

SoIcopiedpartofthemainpagetothebase.vuefileasyoucanseebelow;

<template><div><v-header><v-toolbar><[email protected]="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>

This piece of code is the slot

<v-content>
  <!-- The content of the page will be placed here -->
  <slot></slot>
</v-content>

This is the rest of the code and I'd like to see name method

  <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>

What was done on the main page? I've added the tags called v-layout as you can see below;

<template>
  <v-layout>
    <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>
      <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>

When I upload the project nothing appears in the browser, and yes, an error message appears at the DOS prompt as you can see below;

PS C:\Users\wladimir\Desktop\versão 2 vue\music-db\frondend> yarn run dev
yarn run v1.1.0
$ node build/dev-server.js
> Starting dev server...


 ERROR  Failed to compile with 1 errors                                                                                                                                        17:33:07


 error  in ./src/pages/artists/index.vue

(Emitted value instead of an instance of Error)
  Error compiling 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>
      <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>

  - tag <v-content> has no matching end tag.
  - tag <div> has no matching end tag.


 @ ./src/pages/artists/index.vue 6:0-325
 @ ./src/routes/index.js
 @ ./src/bootstrap.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080

I think the problem is that my project is not recognizing the v-layout directive

You should know why you do not recognize.

    
asked by anonymous 28.09.2017 / 23:15

1 answer

1

Probably the problem is that the v-layout among other tags you're using throughout your <template> , as well as the teacher uses, is Vetify where framework of components with Material Design for Vuejs2.

You can check here the entire grid structure is used, based on flexbox / em>.

According to the documentation, to install Vuetify in Github in an existing project:

npm

npm install vuetify

yarn

yarn add vuetify

Then import and start using in your initial configuration file:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Or it can be imported by links:

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

Even in your webpack:

require('/path/to/node_modules/vuetify/dist/vuetify.min.css')
    
07.01.2018 / 18:05