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.
Related
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,
},
},
})
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');
Please check my code below i have to navigate to EmployeeCreate after login success .I use this in dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' })); in my AuthActions.js. but not working.Previously i used 'react-native-router-flux' instead of react-navigation. Iam new to react-native and couldn't find the issue.
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';
class App extends Component {
componentWillMount() {
const config = {
apiKey: "###",
authDomain: "###",
databaseURL: "###",
projectId: "###",
storageBucket: "###,
messagingSenderId: "0000000"
};
firebase.initializeApp(config);
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
export default App;
Router.js
import React from 'react';
import { StackNavigator} from 'react-navigation';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';
import EmployeeCreate from './components/EmployeeCreate';
import EmployeeEdit from './components/EmployeeEdit';
const RouterComponent = StackNavigator({
LoginForm : {screen : LoginForm},
EmployeeCreate : {screen :EmployeeCreate},
EmployeeEdit:{screen:EmployeeEdit},
},
{
headerMode : 'none',
navigationOptions:{
headerVisible : false,
}
}
)
export default RouterComponent;
AuthActions.js
import firebase from 'firebase';
import { NavigationActions } from 'react-navigation'
import {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER
} from './types';
export const emailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload: text
};
};
export const passwordChanged = (text) => {
return {
type: PASSWORD_CHANGED,
payload: text
};
};
export const loginUser = ({ email, password }) => {
return (dispatch) => {
dispatch({ type: LOGIN_USER });
firebase.auth().signInWithEmailAndPassword(email, password)
.then(user => loginUserSuccess(dispatch, user))
.catch((error) => {
console.log(error);
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(user => loginUserSuccess(dispatch, user))
.catch(() => loginUserFail(dispatch));
});
};
};
const loginUserFail = (dispatch) => {
dispatch({ type: LOGIN_USER_FAIL });
};
const loginUserSuccess = (dispatch, user) => {
dispatch({
type: LOGIN_USER_SUCCESS,
payload: user
});
dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' }));
};
AuthReducer.js
import {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER
} from '../actions/types';
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
loading: false
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
return { ...state, email: action.payload };
case PASSWORD_CHANGED:
return { ...state, password: action.payload };
case LOGIN_USER:
return { ...state, loading: true, error: '' };
case LOGIN_USER_SUCCESS:
return { ...state, ...INITIAL_STATE, user: action.payload };
case LOGIN_USER_FAIL:
return { ...state, error: 'Authentication Failed.', password: '', loading: false };
default:
return state;
}
};
You are using dispatch method of Redux. You should be using the dispatch method of React-navigation instead. You can do one of these:
1) Do this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'EmployeeCreate' }))
2) Or integrate React-navigation with Redux ( recommended for your case especially ) and use Redux's default dispatch. I have created a barebones repo just for react-navigation + Redux
React navigation with Redux flow is changed little bit in newer versions of React Navigation.
You can checkout the best way to do it from 3.x in their documentation itself.
https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html