This is the problem:
main.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { pt } from 'vuetify/es5/locale/pt'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
directives: {
Ripple,
},
lang: {
locales: {
pt,
},
current: 'pt',
},
})
const opts = {}
const vuetify = new Vuetify(opts)
new Vue({
router,
store,
vuetify,
mounted() {
this.$vuetify.lang.defaultLocale = 'pt'
this.$vuetify.lang.current = 'pt'
},
}).$mount('#app')
So I´m trying to initialize Vuetify using Portuguese.
The data table that´s being used is printing these error messages in the console:
[Vuetify] Translation key "dataTable.ariaLabel.sortNone" not found, falling back to default
[Vuetify] Translation key "dataTable.ariaLabel.sortNone" not found in fallback
and so on...
Codepen reproducible example: https://codepen.io/adrielwerlich/pen/MWKJaRV
GitHub bug report link: https://github.com/vuetifyjs/vuetify/issues/11676
How can I solve this?
Related
laravel project with vue.i install all thing in app js to work v-select, i don't know anyhting is missing in installation or not.if something is missing tell me that or somthing is wrong in v-select tag please help if anyone is experienced such a thing
on app.js-----------------------------------------------------------------
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Cat from './components/dashboard/category/Category.vue';
import Sub from './components/dashboard/sub-category/sub-category.vue';
import Dash from './components/dashboard/Dashboard.vue';
import VueToast from 'vue-toast-notification';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import VModal from 'vue-js-modal';
// import Vue from 'vue';
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
// Import one of available themes
import 'vue-toast-notification/dist/theme-default.css';
import { Form, HasError, AlertError } from 'vform';
window.Form = Form;
// import {routers} from './routers';
Vue.use(Vuetify)
Vue.use(VueToast);
Vue.use(VueRouter);
Vue.use(VModal);
// Vue.use(vSelect)
Vue.component('v-select', vSelect)
const routes = [
{ path: '', component: Dash },
{ path: '/category', component: Cat },
{ path: '/sub-category', component: Sub },
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
vuetify: new Vuetify()
});
on component--------------------------------------------------------------------------------
<v-select v-model="select" :items="categories" label="Select" item-text="name" item-value="id" return-object> </v-select>
export default {
data(){
return {
form: new Form({
name:'',
imgUrl:'',
remember: false
}),
categories:[],
select: 'Select',
}
},
mounted(){
this.getCategories()
},
methods:{
getCategories(){
axios.get('sub-category')
.then(res => (
res.data.forEach((value, index) => {
this.categories.push(value);
})
));
}
}
}
Should the items property in the v-select tag not be called options? Source: https://vue-select.org/guide/options.html#options-prop
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;
I'm trying to use Vuetify in Storybook with costume setup. The .Storybook/config.js looks like:
import { configure, addDecorator } from '#storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
dark: {
primaryTypColor: '#232B2B',
productCardTitle: '#7E7F80'
},
light: {
primaryTypColor: '#232B2B',
productCardTitle: '#7E7F80'
},
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
configure(require.context('../stories', true, /\.stories\.js$/), module);
I'm getting the error: undefined is not an object (evaluating 'this.$vuetify.theme.dark') why is that?
It is because you haven't injected the global vuetify object in the Vue.js context. You can do so with a decorator.
In your example it looks like you only need to add the Vuetify that you imported to the addDecorator function as a parameter.
A complete example for storybook versions below 6, here is how:
import Vue from 'vue';
import vuetify from '#plugins/vuetify'
Vue.use(vuetify)
addDecorator(() => ({
template: '<v-app><story/></v-app>',
vuetify,
}));
For storybook version 6:
import vuetify from '#plugins/vuetify'
import Vue from 'vue'
Vue.use(vuetify)
export const decorators = [
() => ({
template: '<v-app><story/></v-app>',
vuetify
}),
]
I am trying to make a vue SPA using vuex, vue-router & laravel for backend. I was separating our data on our app.js to try to reduce clutter and keep our code neat. When everything on one page it works as intended, loading the routes in the router. But when we separate the code to make it more modular into: app.js, boostrap.js, routes.js, and store.js
The components aren't loading in our router-view and we are able to see our RouterLink
app.js
// Require the bootstrapper
require('./bootstrap');
// Grab imports
import Store from './store';
import Router from './routes';
// Views
import App from './views/App';
// Create the application
const app = new Vue({
el: '#heroic',
components: { App },
store: Store,
router: Router
});
boostrap.js
// Imports
import Vue from 'vue';
import Axios from 'axios';
import Swal from 'sweetalert2';
// Add to window
window.Vue = Vue;
window.Axios = Axios;
// Add Axios headers
window.Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
window.Axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
routes.js
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Hello from './views/Hello';
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
}
];
// Create the router
const router = new VueRouter({
mode: 'history',
routes: routes,
scrollBehavior (to, from, saved) {
if (saved) {
return saved;
}
return { x: 0, y: 0};
}
});
// Before every request
router.beforeEach((to, from, next) => {
});
// After every request
router.afterEach((to, from, next) => {
});
// Export
export default router;
hello.vue
<template>
<div class="row row-cards row-deck">
<div class="col-lg-4 col-md-6">
<p>Hello World!</p>
</div>
</div>
</template>
store.js
// Imports
import Vue from 'vue';
import Vuex from 'vuex';
import PersistedState from 'vuex-persistedstate';
import Cookie from 'js-cookie';
// Set use
Vue.use(Vuex);
// Create our store
const store = new Vuex.Store({
state: {
auth: [{
id: 1,
username: '',
motto: '',
rank: 1,
permissions: [],
token: ''
}],
users: [],
},
mutations:{
},
actions: {
},
getters: {
}
});
// Export
export default store;
The expected result is that when I visit the "/hello" route it would show the information that says "Hello world!" that is within the Vue file specified as the component in the routes section of the router. Instead using my Vue DevTools I get the following with no Hello world on the page.
https://i.pathetic.site/chrome_99Mbxf7f0c.png
My guess is the router is stuck waiting for the beforeEach (and also possibly afterEach) hook to be resolved. You need to call next().
Also unrelated, but if you’re using modules then you shouldn’t need to assign stuff on window.
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) + '\')'
}
}
}