Develop Reference

How to import i18n in Vue file

I am using i18n library in Vue.js for language translation. I want to to import in it my script and store a value in data, but I have trouble with importing it. How should I import it? I tried with import $t from "./i18n"; but that just returns this error: Module not found: Error: Can't resolve './i18n'
here is my code:
script>
import Header from "../components/Header";
import $ from "jquery";
import $t from "./i18n";
export default {
name: "GroupPermissions",
components: {
Header
},
data() {
return {
showAddGroupDialog: false,
updatePermissionDialog: false,
itemsToBeDeleted: [],
permissions: $t("groupPermissions.table.permissions")
};
and my main.js:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
import "vue-multiselect/dist/vue-multiselect.min.css";
import $ from "jquery";
import Multiselect from "vue-multiselect";
import i18n from "./i18n";
import "#/plugins/echarts";
import Sticky from 'vue-sticky-directive'
Vue.component("multiselect", Multiselect);
Vue.use(VueMaterial);
Vue.use(Sticky);
Vue.config.productionTip = false;
new Vue({
router,
$,
i18n,
render: h => h(App)
}).$mount("#app");

If you'd like use vue-i18n, in your main.js you should import vue-i18n library first and create an i18n variable like this:
import VueI18n from 'vue-i18n';
const i18n = new VueI18n({
locale: 'en',
messages: { 'en': { title: 'Title' }},
});
and pass the i18n var to your Vue in main.js as you did it:
new Vue({
router,
$,
i18n,
render: h => h(App)
}).$mount("#app");
After this, in your component you will have a this.$t('title') method that will return with 'Title' value.
This link may help for you: http://kazupon.github.io/vue-i18n/started.html#javascript

Imre showed how to install the vue-i18n globally. I'll just add that you can also import an instance of i18n and use it in any javascript file, not only within Vue components.
If you export i18n like this
import VueI18n from 'vue-i18n';
export const i18n = new VueI18n({
locale: 'en',
messages: { 'en': { title: 'Title' }},
});
you can then use it in Vue components, though using this.$t() is preferable.
<script>
import Header from "../components/Header";
import $ from "jquery";
import { i18n } from "./i18n";
export default {
name: "GroupPermissions",
components: {
Header
},
data() {
return {
showAddGroupDialog: false,
updatePermissionDialog: false,
itemsToBeDeleted: [],
permissions: i18n.t("groupPermissions.table.permissions")
};
</script>
But more relevantly, you can use this anywhere else.
//some-function.js
import { i18n } from "./i18n";
function someFunction() {
console.log(i18n.t(...));
}

Migrating Vue 2 to Vue 3, typeError: Vue is not a constructor

How can I migrate my Vue 2 syntax to Vue 3, because I'm receiving the following error:
TypeError: Vue is not a constructor.
Right now I'm using Vue 3:
let app;
firebase.auth().onAuthStateChanged(user => {
console.log("user", user);
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
});
To
import { createApp } from "vue";
const app = createApp({
});
app.mount("#app");

The equivalent of your code in Vue 3, Vuex 4, Vue Router 4 would be something like:
import { createApp } from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'
let app;
firebase.auth().onAuthStateChanged(user => {
console.log("user", user);
app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");
});
The store syntax is slightly different in store.js:
import { createStore } from 'vuex'
// now uses `createStore`
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})
And the router in router.js:
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

vue-router : failed to resolve async component render

I am a beginner to vue-router and I can't make it work. When I start my app, I get the following errors :
[vue-router] Failed to resolve async component render: TypeError: _vm is undefined
49:16:39
[vue-router] uncaught error during route navigation:
49:16:39
TypeError: _vm is undefined
Stack trace:
render#webpack-internal:///63:3:7
resolveAsyncComponents/</<#webpack-internal:///49:1774:17
flatMapComponents/</<#webpack-internal:///49:1801:66
...
Here are my files : main.js
import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import 'bootstrap'
new Vue({
el: '#app',
router,
render: h => h(App)
})
routes.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'
export const routes = [
{ name: 'Home', path: '', components: Home }
]
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
export default router

There is a typo in routes, change components to component:
export const routes = [
{ name: 'Home', path: '', component: Home }
]

must call Vue.use(Vuex) before creating a store instance

I cant't figure out why I am getting this error. Everything looks properly.
Import store to the component like this.
import store from './store';
new Vue({
components: {
SomeComponent
},
store
});
My store looks like this
import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';
import * as actions from './actions';
import mutations from './mutations';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
something
}
})
Please any help.
Thanks
Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

Using Vue CLI and setting up like this works for me
in store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
something: ['something']
}
})
in main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})

I've had a similar problem, and turns out that my modules were returning a Vuex.Store instance instead of a javascript object.
My files was like:
app.js
import Vue from 'vue'
...
import store from './store'
...
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import myModule from './my-module'
...
export default new Vuex.Store({
modules: { myModule }
....
})
my-module/index.js (Here was my problem)
import Vuex from 'vuex'
...
export default new Vuex.Store({
namespaced: true,
state: { ... },
...
})
My mistake was that I must have only one store, the root store, the others are modules of root. So I must not instantiate a new store, but return a config object instead. Like so:
my-module/index.js (Corrected version)
...
export default {
namespaced: true,
state: { ... },
...
}
So, if anyone arrived here with the same problem, I hope it can save you some time.

See https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart for how they do it in their sample app.
app.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import { currency } from './currency'
Vue.filter('currency', currency)
new Vue({
el: '#app',
store,
render: h => h(App)
})
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
modules: {
cart,
products
},
strict: debug,
plugins: debug ? [createLogger()] : []
})

#katieh
Ou.. I'e resolved this problem. I had 'vue' instead of 'vue-loader' in webpack. So, *** happens then i remove vue-loader work well

you literally need to add something to the store; a state, module or a getter

I create a repositorie: vue-use-vuex to solved this bug.
You can Use it to fixed:
npm install vue-use-vuex --save
add one line code in you entry:
import 'vue-use-vuex'
The error will not be seen.

Uncaught TypeError: Cannot set property 'app' of undefined Vue.js

I wanted to setup a SPA using Laravel 5.4 and Vue2. I have following a tutorial (Jeffrey Way - Laracast). But i am getting this issue. Can not figure it out why this error in console?? :
Uncaught TypeError: Cannot set property 'app' of undefined
at VueRouter (app.js:3149)
at Object.<anonymous> (app.js:4266)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:3343)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:13749)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69
Here is my code below :
app.js
import router from './routes';
import './bootstrap';
var app = new Vue({
el: '#root',
router
});
routes.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home')
}
];
export default VueRouter({
routes
});
bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
window.axios = axios;
Vue.use(VueRouter);
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};

export default new VueRouter({
routes
});
add "new"

let routes = [
{
path: '/',
component: require('./views/Home')
}
];
export default new VueRouter({
routes
});