How To Intergrate Vuejs To Vuetify - Step By Step Process


install Packages:

 npm install vuetify

npm install sass sass-loader fibers deepmerge -D

 Index.html:

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

Main.js 

import Vuetify from 'vuetify'
Vue.use(Vuetify);

new Vue({
    el: '#app',
    ...
    vuetify : new Vuetify(),
...
...
})

vuetify.js:

 import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';

Vue.use(Vuetify)

export default new Vuetify(opts)
Vue.use(Vuetify, {
  iconfont: 'faSvg',
})


export default new Vuetify({ 
  icons: {
    iconfont: 'md'
  },
})

Setup Done,



Now You can Apply Vuetify to you code.




Comments

Post a Comment

Popular posts from this blog

ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line

I execute the influxdb query like this in CMD SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()-15m and time<=now()-15m  and node=" getting error: ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line 277 Resolved? SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()- '15m' and time<=now()-'15m' and node="
Read more

How To Convert Html File/URL/String Into Image Using Python

   I worked on converting HTML formate to PNG Image using python, its take 1 week to complete, First, I tried with  Imgkit  Package then I tried with  Html2image  Package, Later I tried with  Pypperteer  Package, When I used Imgkit package, I faced on one issue what it means, in HTML file we have any embedded code or more loading javascript code, its take more than 5 sec so when I used imgkit it is not taking those things on the image. when I used Html2image Package, I faced the same issue Finally, I solved that loading issue using Pypperteer Package ( https://github.com/pyppeteer/pyppeteer ), In Pypperteer Package we have one option, by using that option we can stop converting into the image until load the complete HTML file, And here we have one more great option to pass HTML string to get Document Elements like OffsetHight, etc. import asyncio from pyppeteer import launch def converting_html_image(input_url) -&gt; str:     file_na...
Read more

How to get Full URL or get absolute url In Django

this is use full to get full url for images or files. getting: [     {          "id" :  1 ,          "photo_url" :  "/media/media/11_sUhP0CC.png"     } ] Need: (after apply below process we get full url) [     {          "id" :  1 ,          "photo_url" :  "http://localhost:8000/media/media/11_sUhP0CC.png"     } ] Existing code: models.py class Car ( models . Model ): name = models . CharField ( max_length = 255 ) price = models . DecimalField ( max_digits = 5 , decimal_places = 2 ) photo = models . ImageField ( upload_to = 'cars' ) serializers.py class CarSerializer ( serializers . ModelSerializer ): class Meta : model = Car fields = ( 'id' ...
Read more