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.