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);
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({});
In my app I use Login.vue and Logout.vue components, located in
/resources/js/components/auth
Locally the app runs fine on localhost.
Now I pushed to app to the remote repository, and the I get the following error after running:
npm run production
the error is:
ERROR Failed to compile with 1 errors 3:05:45 PM
error in ./resources/js/app.js
Module not found: Error: Can't resolve './components/auth/Login.vue' in '/var/www/ijsbrekerz/resources/js'
app.js looks like:
**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
import 'bootstrap';
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes.js';
import store from './store';
import vuex from 'vuex';
import { createApp } from 'vue';
import axios from 'axios';
import Master from'./components/layouts/Master.vue';
import ExampleComponent from'./components/ExampleComponent.vue';
import ManageCards from'./components/ManageCards.vue';
import Navibar from'./components/Navibar.vue';
import CreateSpeler from'./components/CreateSpeler.vue';
import CardsSpeler from'./components/CardsSpeler.vue';
import Home from'./components/Home.vue';
import ModalComponent from'./components/ModalComponent.vue';
import Game from'./components/Game.vue';
import GameAdmin from'./components/GameAdmin.vue';
import Login from'./components/auth/Login.vue';
import Logout from'./components/auth/Logout.vue';
import ImageUpload from'./components/ImageUpload.vue';
import Memory from'./components/Memory.vue';
// link naar uilteg opzetten routes..
const router = createRouter({
history: createWebHistory(),
routes: routes.routes,
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters.loggedIn) {
next({
name: 'login',
})
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (store.getters.loggedIn) {
next({
name: 'gameadmin',
})
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (store.getters.loggedIn) {
next({
name: 'cards',
})
} else {
next()
}
} {
next() // make sure to always call next()!
}
})
const app = createApp({
components: {
ImageUpload,ExampleComponent,ManageCards,CardsSpeler,Memory,Home, Navibar, CreateSpeler, Game, ModalComponent, CardsSpeler, GameAdmin,Login,Logout// hier alle data en functies waar vue wat mee moet
}
});
app.use(router);
app.use(store);
app.use(vuex);
app.component('ModalComponent', ModalComponent);
app.component('CreateSpeler', CreateSpeler);
app.component('CardsSpeler', CardsSpeler);
app.component('ManageCards', ManageCards);
app.component('Navibar', Navibar);
app.component('Login', Login);
app.component('Logout', Logout);
app.component('Master', Master);
app.component('ImageUpload', ImageUpload);
app.component('Memory', Memory);
app.mount('#app');
///window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
//const app = new Vue({
// el: '#app',
//});
The directory structure of components is:
> app/resources/js/components/
>auth
>Login.vue
>Logout.vue
>layouts
>Master.vue
>CreateSpeler.vue
>ManageCards.vue
>etc
Can anyone understand why this is no problem locally, but on the remote server it generates the error?
I have installed vue#next, laravel-mix#next
First of all, I don't see where is the app.js is located in your directory structure but I am assuming that it is inside the app/resources/js directory.
Now if you are having errors at the server only but not in the local, I suggest the below possible solutions.
You might be running the project locally on a windows machine. In windows, the path doesn't strictly check. For example, auth/Login.vue and auth/login.vue will be treated as the same but in the Linux system, they are treated differently. Hence, check if the Login.vue is not actually login.vue.
Try to run production mode in the local machine and check if you get the same error or not. If you get an error there too, you might have a spelling mistake somewhere or the directory structure is wrong.
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 followed a tutorial on youtube for Vuetify setup with laravel. I managed to set up the project successfully, i.e. install all dependencies as specified in the tutorial. Although in the final step, NPM watch, I get the following error in the console;
Uncaught TypeError: _plugins_vuetify__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
vuetify.js code:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
The problem is exactly lies where you exporting default Vuetify.
The best practice to this is to import Vuetify in the separate file in the plugins for example so I will keep this up with this practice.
So after running:
$ npm install vuetify --save
// OR
$ yarn add vuetify
to install Vuetify on existing applications through the Webpack or creating a new Vue.js project just like this:
$ vue add vuetify
You should follow the below instruction.
Vuetify v1.5.*
If you are using Vuetify v1.5.* follow the below instruction (otherwise, skip this to the next one)
First of all you don't have to export Vuetify in this version and you just have to import Vuetify and tell Vue to use it. So the plugins/vuetify.js should be like this (You can also directly do the following in your main.js or app.js):
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
NOTE: You can also define some setting in the above file within the Vue.use and pass it as an object just like this:
Vue.use(Vuetify, {/*Your setting goes here*/})
And then import it like below in your main.js or app.js:
// main.js or app.js
import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css' // You also need to import Vuetify CSS file and also ensure you are using css-loader
import './plugins/vuetify' // We have assuemed the above snippet is in the plugins directory and it lies next to main.js or app.js
...
new Vue({
el: "#app",
router,
store,
render: h => h(App),
})
Vuetify v2.*.*
After adding it through your Webpack you need to locate webpack.config.js and add the following setting into your Webpack to configure the loader:
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
After that just create a plugin directory and then vuetify.js file like and add the following into it:
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Then navigate to your main entry (main.js or app.js) and import it like below:
// main.js or app.js
import Vue from 'vue'
import vuetify from '#/plugins/vuetify' // We have assumed the above snippet is in the plugins directory and it lies next to main.js or app.js
new Vue({
vuetify,
}).$mount('#app')
NOTE: This much more sound like an instruction but for more information you can visit the documentation here.
In my .vue file within my template section I have:
<a v-bind:href="'javascript:artist(\'' + _.escape(artist) + '\')'">
which is using the Lodash function _.escape. This generates a string of errors the first of which is:
[Vue warn]: Property or method "_" is not defined on the instance but referenced during
render.
However in the same file in the script section of the component I am happily and successfully using a range of Lodash functions.
This is a Laravel app and in my app.js file I have this code:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
import lodash from 'lodash';
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash });
import SearchHome from './components/search.vue';
const routes = [
{
path: '/',
components: {
searchHome: SearchHome
}
},
]
const router = new VueRouter({ routes })
const app = new Vue({ router }).$mount('#app')
Can anyone please help me?
Try to use a computed value instead. This will improve readability.
Avoid complex operation in a binding.
<a :href="artistLink">
And in the script
import _ from 'lodash'
export default {
computed: {
artistLink () {
return 'javascript:artist(\'' + _.escape(this.artist) + '\')'
}
}
}