I am working on an app that before upgrading to Laravel 9 was working fine. I used Laravel Shift for the Laravel 9 upgrade and that bumped laravel-mix to the latest version 6.x and the problems started. I had some problems compiling which was weird but I fixed it. Now, I compile but I get the following error when I try to run the frontend:
Uncaught TypeError: Cannot read properties of undefined (reading 'silent')
this is the code that causes it:
VueI18n.prototype._initVM = function _initVM (data) {
var silent = Vue.config.silent;
Vue.config.silent = true;
this._vm = new Vue({ data: data, __VUE18N__INSTANCE__: true });
Vue.config.silent = silent;
};
I have no idea what this code is for?
I am running Vue version 2.5.22 with Laravel 9. Also, vue-i18n 8.28.2.
Here is my app.js:
import Vue from 'vue';
import router from './router';
import App from "./components/App";
import {store} from './store';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import { messages } from './locales/de';
const i18n = new VueI18n({
locale: 'de', // default and only locale
messages,
});
Vue.use(Vuelidate);
const app = new Vue({
el: '#app',
i18n,
router,
store,
components: {
App
},
});
Googling reveals nothing. Any ideas?
Try to include VueI18n as a component first before creating an instance:
Vue.use(VueI18n);
const il8n = new VueI18n({});
Related
I am trying to import vue into laravel appjs file but am seeing no result.
My component is called Dash.vue and its located in 'resources\js\components'
The code below is what i have tried
import Dash from 'resources\js\components';
new Vue({
components: {
"Dash": YourComponent
});
try with:
import Dash from './resources/js/components/Dash';
new Vue({
components: {
Dash
});
I noticed that while using a REST client like insomnia, I'm getting a high ms while performing a post for login.
Also my app.js is currently sitting at 2.43 MB with just these lines.
window.Vue = require('vue')
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import NProgress from 'vue-nprogress'
import 'vuetify/dist/vuetify.min.css'
import App from './App.vue'
import { router } from './routes.js'
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(NProgress)
Vue.component('base-table', require('./components/BaseTable.vue').default)
const vuetify = new Vuetify();
const nprogress = new NProgress();
new Vue({
el: '#app',
render: h=>h(App),
vuetify,
router,
nprogress
});
I'm fairly new with Vue + Laravel SPA and I don't know if this is considered as very bad for loading an application. Will minimizer greatly reduce the file size and boost loading speed when it's ready for production?
I have tried multiple different plugins with my Vue.js cli webpack projects and I am getting the same problem with all of them, namely that once I have included a plugin, I am unable to use it.
As an example. I have tried to use the plugin at this link. https://www.npmjs.com/package/vue-sessionstorage
Here is my main.js file
import Vue from 'vue'
import router from './router'
import VueMaterial from 'vue-material'
import { store } from './store'
import 'vue-material/dist/vue-material.css'
import 'vue-style-loader'
import VueSessionStorage from 'vue-sessionstorage'
import App from './App'
Vue.use(VueMaterial, VueSessionStorage);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
});
I have run npm install --save vue-sessionstorage
As you can see, I have also imported VueSessionStorage
However, when I try to use it like this
methods: {
login: function () {
console.log("Login clicked");
this.$session.set('username','simon')
console.log(this.$session.get('username'));
},
register: function () {
console.log(this.$session.get('username'));
}
}
I get the error
vue.esm.js?65d7:563 TypeError: Cannot read property 'set' of undefined
at VueComponent.login (Login.vue?2ddf:35)
at boundFn (vue.esm.js?65d7:179)
at Proxy.invoker (vue.esm.js?65d7:1821)
at Proxy.Vue.$emit (vue.esm.js?65d7:2331)
at click (mdButton.vue?3bf8:38)
at HTMLButtonElement.invoker (vue.esm.js?65d7:1821)
handleError # vue.esm.js?65d7:563
Vue.$emit # vue.esm.js?65d7:2333
click # mdButton.vue?3bf8:38
invoker # vue.esm.js?65d7:1821
Vue.use does not permit multiple plugins to be initialized at once like that. Initialize them as two separate calls:
Vue.use(VueMaterial);
Vue.use(VueSessionStorage);
Not sure what happened but this stop working today in my laravel project:
App.js
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'
Vue.component('SweetModal', SweetModal);
in my php file:
<sweet-modal ref="challengeModal"></sweet-modal>
It was working until I had to re install all my node modules. I know the sweet-modal-vue module is in my node_modules.
I have also tried:
Vue.component('sweet-modal', SweetModal);
and:
const app = new Vue({
el: '#app',
components:{
SweetModal
}
});
I am trying to implement simple routing with official route library.
Here is my app.js
window.Vue = require('vue');
window.VueRouter= require('vue-router');
Vue.use(VueRouter);
const vt=Vue.component('example', require('./components/Example.vue'));
const router = new VueRouter({
routes:[
{
path:'/test',
component:vt
}
]
})
const app = new Vue({
el: '#app',
router:router
});
But i got an error
app.js:11256 Uncaught TypeError: VueRouter is not a constructor
This answer is for any onlookers hoping for a little more insight into the problem.
There are two solutions here.
Solution 1: ES Module Import
In Laravel's default config [at least], vue-router is expected to be imported as an es module. So, it should be done at the top of the file.
import VueRouter from 'vue-router'
Solution 2: CommonJS Require
Since vue-router router is an es module, you will have to explicitly access the default property of the CommonJS version of the module.
const VueRouter = require('vue-router').default;
Either Solution
You will have to register Vue Router with Vue.
Vue.use(VueRouter)
Based on the comments finally i resolved with this import
import VueRouter from 'vue-router';
Vue.use(VueRouter);