Category : vuetify.js

Modal shows errors only after i submit the data and type something in the input field. I want it to show instatnly after i submit the form.How to fix theis This is my input field, <b-form-group label-cols-sm="2" label="Confirm Password" label-for="example-hf-email2" > <b-form-input name="password_confirmation" class="form-control-alt" type="password" v-model="form.password_confirmation" ></b-form-input> <div v-if="errors[‘password_confirmation’]"> <div v-for="err in errors[‘password_confirmation’]" :key="err"> <small ..

Read more

I’ve setup a basic project using Laravel, Vuetify, vue-router. I’m trying to make a general layout for the app, then use <router-view> in that layout to embed other pages and components inside it. Inside resource/js I create layouts/default.vue, the part that contains the <router-view> is: layouts/default.vue <v-main> <v-container> <router-view></router-view> </v-container> </v-main> app.js require(‘./bootstrap’); window.Vue = ..

Read more

I have a vue and laravel app that uses vuetify but i have noticed that vuetify is importing all the styles in my header like this.. <style type="text/css">…</style> <style type="text/css">…</style> <style type="text/css">…</style> <style type="text/css">…</style> <style type="text/css">…</style> <style type="text/css">…</style> <- and a lot more -> Each styles hold the styles for each components eg; v-card, v-timeline, ..

Read more

I’m trying to make vuetify components to work in my laravel app but I’m getting this error: [Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the "name" option. My app.js: require(‘./bootstrap’); import Vue from ‘vue’ import Vuetify from ‘vuetify/lib’ import ‘vuetify/dist/vuetify.min.css’; Vue.use(Vuetify); Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default); ..

Read more

I am facing issue with vuetify. Using it with VueJS(obviously) and Laravel. Getting this on console [Vuetify] v-ripple can only be used on block-level elements I’ve followed these following solutions, but didn’t helped me out. Vuetify: v-ripple can only be used on block-level elements vuetify free template theme-blog block-level elements router-link with vue and vuetify ..

Read more

I use Vuetify loader in my Laravel project but compilation doesn’t work. Laravel : 8.46 Vue : 2.6.14 Vuetify : 2.5.3 This is my package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch — –watch-options-poll=1000", "hot": "mix watch –hot", "prod": "npm run production", "production": "mix –production" ..

Read more

hi guys i’m trying to upload photo with vuetify + laravel + axios i wanna when i click on the upload button . Axio Post Method Send the selected file to the server V-file Input : <v-file-input :rules="rules" accept="image/png, image/jpeg, image/bmp" placeholder=" تغیر تصویر پروفایل " prepend-icon="mdi-camera" > </v-file-input> V-btn : <v-btn class="mx-2" fab dark ..

Read more

I’m trying to upload a photo with Vuetify, Laravel and Axios I want to click on the upload button so Axios‘s post method sends the selected file to the server v-file input: <v-file-input :rules="rules" accept="image/png, image/jpeg, image/bmp" placeholder=" تغیر تصویر پروفایل" v-model="files" prepend-icon="mdi-camera"> </v-file-input> v-btn: <v-btn class="mx-2" fab dark small color="deep-purple" @click="updateProfile"> <v-icon dark>mdi-cloud-upload</v-icon> </v-btn> ..

Read more

My application relies on icons for decorating data that’s inserted as a link item into the side navigation by the end user. The current icon libraries installed are as such: Located in the head of vue.blade.app (the view file that Laravel is entering my Vue Single Page Application (SPA) from) <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" ..

Read more