How to Use Vuetify and Learn its components
Image source
This tutorial I will discuss about Vuetify. what is Vuetify? may sound unfamiliar to those of you who have not known vue.js. according to my interpretation Vuetify is a frontend framework consisting of vue.js, semantic and material design. Vuetify makes it easier for you to build the Web. especially if you work fullstack busy with backend. you will be very helpful in the frontend if you use Vuetify. For UI will look powerful and flexible because of using Design material. just take a look at how to use it in Vue.js and how cool the look of the website by using Vuetify
What Will I Learn?
- Install and Use Vuetify in Vuejs
- Layout Vuetify
- Components Vuetify
Requirements
Write here a bullet list of the requirements for the user in order to follow this tutorial.
- Install Vue-Cli and Install Nodejs
- Intermediate Css and Html
- Basic Javascript Es6
Difficulty
- Intermediate
Install and Use Vuetify in Vuejs
The first step we will do is install vuetify.js in vue js. we can use CDN or install it directly on our Vue-cli.
With CDN
< script src="https://unpkg.com/vuetify/dist/vuetify.js" >< /script >
With Npm
npm install vuetify
After installing n ya via npm, we need to register in main.js
import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
We have installed vuetify in vue.js, next we need to import css from vuetify . Here is how to import it.
1.Import css in main.js
import('../node_modules/vuetify/dist/vuetify.min.css')
2.Import css stylus-loader main.styl
@import '../node_modules/vuetify/src/stylus/main.styl'
Layout Vuetify
Vuetify provides a UI layout to facilitate the process of developing a web frontend. to make it easier for development. I will introduce layout layout provided by Vuetify.
1.Baseline Layout
<template>
<v-app id="inspire">
<v-navigation-drawer
fixed
v-model="drawer"
app
>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Contact</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout
justify-center
align-center
>
<v-tooltip right>
<v-btn icon large :href="source" target="_blank" slot="activator">
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-layout>
</v-container>
</v-content>
<v-footer color="indigo" app>
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
</template>
2.Google You tube
<template>
<v-app
dark
id="inspire"
>
<v-navigation-drawer
fixed
:clipped="$vuetify.breakpoint.width > 1264"
v-model="drawer"
app
>
<v-list dense>
<v-list-tile v-for="item in items" :key="item.text" @click="">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
<v-list-tile class="mt-3" @click="">
<v-list-tile-action>
<v-icon color="grey darken-1">add_circle_outline</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon color="grey darken-1">settings</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Manage Subscriptions</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="red" dense fixed clipped-left app>
<v-toolbar-title
:style="$vuetify.breakpoint.width > 1264 && 'width: 300px'"
class="ml-0 pl-3"
:class="$vuetify.breakpoint.width <= 1264 && 'pr-3'"
>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-icon class="ml-3">fa-youtube</v-icon>
</v-toolbar-title>
<v-layout row align-center style="max-width: 650px">
<v-text-field
placeholder="Search..."
single-line
append-icon="search"
:append-icon-cb="() => {}"
class="white--text"
hide-details
></v-text-field>
</v-layout>
</v-toolbar>
<v-content>
<v-container fill-height>
<v-layout justify-center align-center>
<v-tooltip right>
<v-btn icon large :href="source" target="_blank" slot="activator">
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: null,
items: [
{ icon: 'trending_up', text: 'Most Popular' },
{ icon: 'subscriptions', text: 'Subscriptions' },
{ icon: 'history', text: 'History' },
{ icon: 'featured_play_list', text: 'Playlists' },
{ icon: 'watch_later', text: 'Watch Later' }
],
}),
props: {
source: String
}
}
</script>
<style>
.input-group__details:after {
background-color: rgba(255, 255, 255, 0.32) !important;
}
</style>
Components Vuetify
Vuetify provides components that are ready to use and can be used repeatedly.
1.Alerts
If usual we display alerts with library support, then in vuetify we have provided komponent alerts that you can call anywhere, here is how to use it.
<template>
<div>
<v-alert color="success" icon="check_circle" value="true">
This is a success alert.
</v-alert>
<v-alert color="info" icon="info" value="true">
This is a info alert.
</v-alert>
<v-alert color="warning" icon="priority_high" value="true">
This is a warning alert.
</v-alert>
<v-alert color="error" icon="warning" value="true">
This is a error alert.
</v-alert>
</div>
</template>
We can use component alerts with v-alert
There are 4 different color options and types are success, error, info, warning
2. Forms
<template>
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
></v-text-field>
</v-form>
</template>
3. Bottom navigation
In the mobile web version we often find bottom navigation. because it vuetify provides that component.
<template>
<div id="app">
<v-card height="200px">
<div class="headline text-xs-center pa-5">Active: {{ e1 }}</div>
<v-bottom-nav absolute :value="true" :active.sync="e1" color="transparent">
<v-btn flat color="teal" value="recent">
<span>Recent</span>
<v-icon>history</v-icon>
</v-btn>
<v-btn flat color="teal" value="favorites">
<span>Favorites</span>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn flat color="teal" value="nearby">
<span>Nearby</span>
<v-icon>place</v-icon>
</v-btn>
</v-bottom-nav>
</v-card>
</div>
</template>
</template>
<script>
export default {
data () {
return {
e1: 'recent'
}
}
}
</script>
<style>
#app{
max-width: 500px;
text-align: center;
margin:auto;
}
</style>
4. DatePicker
Vuetify also provides components for the datepicker .
<template>
<v-layout row wrap>
<v-flex md12 lg4>
<v-date-picker v-model="picker"></v-date-picker>
</v-flex>
<v-flex md12 lg8 class="hidden-xs-only">
<v-date-picker v-model="picker2" landscape></v-date-picker>
</v-flex>
</v-layout>
</template>
5. Stepper
Vuetify also provides a component for a user interface stepper to indicate the user's step.
<template>
<div id="app">
<v-app id="inspire">
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step step="1" :complete="e1 > 1">Name of step 1</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="e1 > 2">Name of step 2</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Name of step 3</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
<v-btn color="primary" @click.native="e1 = 2">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
<v-btn color="primary" @click.native="e1 = 3">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
<v-btn color="primary" @click.native="e1 = 1">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-app>
</div>
</template>
<script>
export default {
data () {
return {
e1: 0
}
}
}
</script>
<style>
#app{
max-width: 800px;
height: 500px;
text-align: center;
margin:auto;
}
</style>
Finally we can finish this tutorial, we have become acquainted with Vuetify and use it in Vue.js, there are many components that are in vuetify, but not all the components we use in our web application. you can mix and match with your needs. just so much of me hopefully this tutorial can help you in building a better web frontend again. thank you
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules.
Violated Rule:
My Opinion:
You can contact us on Discord.
[utopian-moderator]
What i must created my own framework or my own programming languange, so you can approved it??
No, but this tutorial is an abomination with several code blocks and no explanation. A tutorial must teach.
I approved (rare event) this one week ago: https://utopian.io/utopian-io/@casweeney/how-to-create-a-secured-user-login-authentication-and-display-user-details-of-a-logged-in-user-using-php-and-mysqli-procedural
Did you figure out the difference?
I think this explanation is enough. If you think I'm wrong, you are welcome at our Discord. You can contact my supervisor, @deathwing. Don't use DM, tag him in #help channel. Have a nice day.
thanks for your explanation, i understand what you mean. your explanation is clear. so I know what i must to do in the next post. see you in the next post :)