I want to use #mdi/js in my Laravel 9 Vuetify 3 app. The Vuetify 3 documentation says what should be done. But that doesn't work for me.
My app.js
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(vuetify)
.mount(el);
},
});
My template:
<script setup>
import { mdiAccount } from '#mdi/js'
</script>
<template>
<v-icon :icon="mdiAccount"></v-icon>
</template>
It seems vuetify v-icon can't handle the SVG graphic. Does anyone have an idea how I can use #mdi/js with v-icon and other vuetify emits?
The documentation states that you need to add a few things to your createVuetify call to make svg icons work.
Amend the call like this:
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
})
Related
I am using Element-plus ui for this crud app. Which is build in laravel -8 and vue -3 But when ever i am trying to access prototype.$loading or $notify is is showing the error Cannot read properties of undefined (reading '$loading')
Now how i will do?
I am new in vue 3.
action.js
import axios from "axios";
import { createApp } from 'vue';
let loader = null;
function showLoader(text = "Loading") {
loader = createApp.prototype.$loading({
lock: true,
text: text,
spinner: 'el-icon-loading',
background: 'rgb(255,255,255,0.85)',
})
}
function hideLoader() {
loader.close();
}
export const saveStudent = ({commit}, payload) => {
let url = `/save-student`;
showLoader('Saving Student Data');
axios.post(url, payload)
.then(res => {
createApp.prototype.$notify({
title: 'Success',
message: 'Student Created Successfully',
type: 'success'
});
hideLoader();
window.location.href = "/students";
})
}
app.js
import './bootstrap';
import { createApp } from 'vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {store} from './store/store.js'
import axios from "axios";
const app = createApp({});
import StudentForm from './components/student/StudentForm.vue';
app.component('student-form-component', StudentForm);
app.config.globalProperties.$axios = axios;
app.use(ElementPlus);
app.use(store);
app.mount('#app');
store.js
import {createStore} from "vuex";
import * as getters from './getters.js'
import * as mutations from './mutations.js'
import * as actions from './actions.js'
export const store = createStore({
modules: {},
state: {},
mutations,
getters,
actions,
})
Hello i need help to add VueGoogleMaps from #fawmi/vue-google-maps
i got confused on how to add that to may laravel inertia vue project.
this is my app.js configuration and still not working.
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "#inertiajs/inertia-vue3";
import { InertiaProgress } from "#inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { createPinia } from "pinia";
import { VueGoogleMaps } from "#fawmi/vue-google-maps";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
const pinia = createPinia();
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(pinia)
.use(ZiggyVue, Ziggy)
.use(VueGoogleMaps, {
load: {
key: "", // i have my API key on .env GOOGLE_MAPS_API_KEY
},
})
.mount(el);
},
});
InertiaProgress.init({ color: "#4B5563", showSpinner: true });
Code on how to fix my problem.
I have a Laravel 9 project with Vue.js 3 and Inertia.js.
When I update a Vue components outside the ./resources/js/Pages directory Vite isn't updating the changes automatically. I need to completely restart the Vite server (npm run dev) to get the changes.
When I update a Vue file in the ./resources/js/Pages directory Vite is updating the changes.
Vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
App.js:
import './bootstrap';
import '../scss/app.scss';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
const myApp = createApp({ render: () => h(app, props) });
myApp.use(plugin);
myApp.use(ZiggyVue, Ziggy);
myApp.mount(el);
return myApp;
},
});
InertiaProgress.init({ color: '#055CFC' }); //#4B5563
How can I fix it so that Laravel Vite will update my changes?
I'm learning how to use Vuex, and I'm trying to use it on a Laravel 8 with Inertia Stack, i'm using vue 3.
Store/index.js
import { Store } from 'vuex'
export const store = new Store({
state () {
return {
count:0
}
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})
And here's my app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import Vuex from 'vuex';
import { store } from './Store'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(Vuex)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
But I always end up with a console error:
app.js:106250 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
I've also tried:
.use(store)
But it doesn't seem to work. I'll appreciate if someone can point me what i'm missing or what I'm doing wrong
I had this problem too with vuex 3.x.x
I did this and it worked:
npm uninstall --save vuex
Then i reinstalled it :
npm install --save vuex#next (vuex 4.x.x)
In app.js I used .use(store).
And I don't know if it change anything but in store/index.js I exported as export default new Store({...})
Store/index.js
import { createApp } from 'vue';
import { createStore } from 'vuex';
const store = createStore({
state: {
count:0
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})
export default store
And here's my app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import store from '#/store/index';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(store)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
I tried importing vue-moment and initializing it by using .use(VueMoment) as shown below. But after i do that the whole app shows error. Anyone facing the same problem?
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import VueMoment from 'vue-moment' ////////imported vue-moment
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({
methods: {
route,
validationError(field){
if(this.$page.props.errors && this.$page.props.errors[field]){
return this.$page.props.errors[field];
}
else{
return null;
}
}
} })
.use(InertiaPlugin)
.use(VueMoment) /////use vue-moment
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
This is the error i am getting
first install moment by
npm install moment
<template>
{{today}}
</template>
<script>
import moment from 'moment'
export default {
name:'Home',
data(){
return{
today:moment().startOf('day').toDate(), moment().endOf('day').toDate()
}
}
</script>
there is a working example of how to import 'vue-moment' from my Laravel + inertia project
const vm = new Vue({
metaInfo: {
titleTemplate: title => (title ? `${title} - Ping CRM` : 'Ping CRM'),
},
store,
render: h =>
h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => import(`#/Pages/${name}`).then(module => module.default),
},
}),
}).$mount(el)
Vue.use(require('vue-moment'))
Might help someone who is using InertiaJs with Vue and want to declare globally.
In app.js
createInertiaApp({
id: 'app',
setup({ el, App, props}) {
let app = createApp({
render: () => {
return h(App, props);
},
});
//you can declare any other variable you want like this
app.config.globalProperties.$moment = moment;
app.use(
store,
.....
).mount(el);
},
});
Now in the vue file you can call moment by
this.$moment(this.time,'H:m').format('hh:mm a');