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
}
});
Related
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({});
Hi I am quite new to laravel and vue. I am trying to use vuex for the first time but could not figure out why.
I have installed vuex and have imported it in app.js like this
import Vuex from 'vuex';
Vue.use(Vuex);
and I am declaring the vue individually in the blade files so i am trying to do the same with vuex in the blade file
<script>
const store = new Vuex.Store({
state: {
village: ''
},
mutations: {
changeVillage (state,value) {
state.village = value;
}
}
});
var app = new Vue({
el: '#app',
store: store,
data: {
},
});
</script>
now the problem is vuex is not recognized and says its undefined.
i tried to declare the constant store in app.js but then this time it says store is undefined
any help will be appreciated
var app = new Vue({
el: '#app',
store: store,
data: {
},
methods: {
changeVillageMethod() {
var cval = 'somevalue';
this.$store.commit('changeVillage', cval)
},
},
computed: {
village() {
return this.$store.state.village;
},
},
});
Now you have access to village value and changeVillageMethod method in the template part.
I recommend reading Veux docs. https://vuex.vuejs.org/
try again according to the instructions:
import Vuex in the file bootstrap.js:
import Vuex from 'vuex';
...
window.Vuex = Vuex;
Vue.use(Vuex);
then make the following changes to the file app.js:
import store from './YOUR_FILE_WITH_DEFINITION_STORAGE_VARIABLE.js';
new Vue({
el: '#app',
store: new Vuex.Store(store)
});
and your storage JS file:
let store = {
...
};
export default store;
In Laravel version 6 the follwing error happens with vue in the console:
app.js:24703 Uncaught ReferenceError: require is not defined
at app.js:24703
the error points to:
require('./bootstrap');
Webpack.mix.js:
mix.scripts([
'resources/js/jquery-3.4.1.js',
'resources/js/bootstrap.min.js',
'resources/js/toastr.js',
'resources/js/vue.js',
'resources/js/axios.js',
'resources/js/app.js'
], 'public/js/app.js')
.styles([
'resources/css/bootstrap.min.css',
'resources/css/toastr.css'
], 'public/css/app.css');
It works fine VUEJS for me but it doesn’t allow me to add components
Also another thing that I notice is that this error disables me vue devtools.
The code is newly installed, both the Laravel and Vue project and if I create a new project I get the same error.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('message', require('./components/message.vue').default);
const app = new Vue({
el: '#app',
data:{
message: ''
},
methods:{
send(){
if(this.message.length !=0){
console.log(this.message);
}
}
}
});
What am I doing wrong?
It sounds like, somehow, the file is given to the browser hasn't been compiled.
You need to change the configuration Webpack.mix.js
You can try change mix.scripts([]) on mix.js([]) and add .vue().
It helped me.
mix.js([
'resources/js/jquery-3.4.1.js',
'resources/js/bootstrap.min.js',
'resources/js/toastr.js',
'resources/js/vue.js',
'resources/js/axios.js',
'resources/js/app.js'
], 'public/js/app.js') .vue();
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);
I start up a new Laravel + Vue + Stylus project, and i can't normally work because i always got blank page when adding/editing some styles on .styl files. And when i edit my .vue templates it come back to normal state.
My main.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes/index';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
My webpack.mix.js file:
mix.js('resources/assets/js/main.js', 'public/js')
.stylus('resources/assets/stylus/app.styl', 'public/css')
.browserSync('localhost:8000');
Some strange thing that i noticed is that when i save my .styl file i got main.js like prod version(not compiled) and in console has an error:
Uncaught SyntaxError: Unexpected token import
If i save this file again i got normal compiled main.js file, but it doesn't render my App
And finally when i edit .vue templates all works perfect.