Categories
Development GitHub Vue

How can I implement seo to vuetify project?

I had try some way https://github.com/nuxt/vue-meta https://github.com/troxler/vue-headful I had install it and try in my project of vuetify I try to click right use mouse on my website and select View Page Source, I see the title, description, keywords don’t change. It still uses the title, keyword and description from public/index.html. I look doubtful this […]

Categories
Development Vue

What for in @vue/cli 4.0.5 app 2 “app” divs?

In my @vue/cli 4.0.5 app in /public/index.html file I see code with div id=“app” <body> <noscript> <strong>We’re sorry but vtasks doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=”app” style=” ></div> <!– built files will be auto injected –> </body> That is clear, but in /src/App.vue file I also see […]

Categories
Development Vue

vue / vuetify dynamically modify v-text-field properties

I’ve got a couple fields: <v-row> <v-col cols=”12″ class=”d-flex”> <v-text-field clearable outlined required :rules=”rules.codeRules” name=”code” v-model=”attribute.code” label=”Code”></v-text-field> </v-col> </v-row> <v-row> <v-col cols=”12″ class=”d-flex”> <v-text-field clearable outlined required :rules=”rules.nameRules” name=”name” v-model=”attribute.name” label=”Name”></v-text-field> </v-col> </v-row> In Vuetify’s documents I see there’s a couple properties named error which triggers an error state and error-messages with messages to be […]

Categories
Development Vue

How fixed to Vuejs error : infinite update loop in a component render function.?

I’m new to Vuejs , I think use wrong syntax but I dont find any solution. This is my code: <v-sheet height=”500″> <v-calendar :now=”today” :value=”today”> <template v-slot:day=”{ date }”> <template v-for=”(event,index) in eventsMap[date]”> <v-menu :key=”index” full-width offset-x> <template v-slot:activator=”{ on }”> <div v-ripple v-bind:style=”Styles3″ v-on=”on”></div> </template> </menu> </template> </template> </v-calendar> </v-sheet> methods:{ idfind(val) { //const […]

Categories
Development Vue

how to access vue data variables or methods within tabulator options

I am using tabulator with vue. Packages: tabulator-tables and vue-tabulator. I’m trying to set a click event on the tabulator row, but need to access the vue data variables within the click event. The script looks like this: import axios from “axios”; import qs from “qs”; import { TabulatorComponent } from “vue-tabulator”; export default { […]

Categories
Development GitHub Vue

Send props and convert image to svg using vue-svg-inline-loader in Vue

I using vue-svg-inline-loader In first component I send using props source to image svg: <IconComponent :imgIcon=”‘../../assets/img/icon-example.svg'” /> Next I have second component when I get props: <img svg-inline :src=”imgIcon” alt=”icon”> export default { name: ‘IconComponent’, props: { imgIcon: { type: String, required: true } } }; But library vue-svg-inline-loader can’t conver img to svg. I […]

Categories
Development Vue

Pass variable from within script tags to Vue instance

In my Drupal 7 site’s html I have this <script>$L = $L.wait(function() { (function($) { Drupal.behaviors.related_products = { attach: function (context, settings) { artiklar = Drupal.settings.related_products.artiklar; console.log(artiklar); } }; })(jQuery); });</script> In the variable artiklar above I have some data that I have passed from the server side using Drupal behaviors. Now, on the client […]

Categories
Development Plugins Vue

Vuejs + webpack shows blank page after importing js file

Vuejs + webpack (development environment) shows blank page after importing core.min.js file inside Footer.vue file. console shows no error. To view the code of core.min.js check https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view Note:I only import core.min.js . App.vue <template> <div id=”app”> <div class=”page”> <app-header></app-header> <app-home></app-home> <app-footer></app-footer> </div> </div> </template> <script> export default { data () { return { msg: ‘Welcome […]

Categories
Development Laravel Vue

Laravel routes not working when using Vue Router

I am trying to call a laravel route Route::get(‘/logout’, ‘Auth\LoginController@logout’); that will logout the user and redirect to the login page, but when I try to redirect to this url it won’t work, anything happens, just like it was calling a vue router route, but this route does not exists in my router.js. This is […]

Categories
Development Vue

Error Cannot tween a null target in Unit test with GSAP-TweenMax, Jest and VueJs

I have an error when trying to perform a unit test with Jest on a component in VueJs that has an animation made with TweenMax GSAP. The error is: Cannot tween a null target. in ztButton.spec.js jest.mock(‘gsap/TweenMax’) it(‘Component must to emit event on click’, () => { const wrapper = shallowMount(ztButton) const spy = sinon.spy() […]