Develop Reference

Vue.js how to get current locale in i18n language package

i want to get my current locale , because i need to check if the current locale === 'en' then return true or false, how can i do this? Vue.js/i18n/vee-validate
main.js :
import { createApp } from "vue";
import { createPinia } from "pinia";
import "./index.css";
import App from "./App.vue";
import router from "./router";
import "#/config/vee-validate/rules";
import "#/config/vee-validate/messages";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");

In option API use :
this.$i18n.locale
in composition API use the useI18n function to get the locale :
const {locale}=useI18n()

how can i make library with Vue.js (Feat. store, router)

first, i'm sorry that my English is not good.
...
I want to make vue.js components module.
I tried simple button component module and It works(it include vuex).
I saw this page.
and I want to make some module with 5 components that use both store and vue-router.
so I tried like this.
import LoadingSpinner from './components/common/LodingSpinner.vue';
import Modal from './components/common/Modal.vue';
import InputPage from './components/InputPage.vue';
import Page from './components/Page.vue';
import ProcessingPage from './components/ProcessingPage.vue';
import store from './store/index.js';
import route from './routes/index.js';
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error('Please initialise plugin with a Vuex store.')
}
options.store.registerModule('dummylib', store);
options.route.registerModule('dummylib', route);
Vue.component('loading-spinner', LoadingSpinner);
Vue.component('modal', Modal);
Vue.component('input-page', InputPage);
Vue.component('page', Page);
Vue.component('processing-page', ProcessingPage);
}
when i finished it and install in new project, I can't see even App.vue and all components are missing.
Here is the main.js of the new project that will include the module.
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import DummyButton from 'dummylib';
import router from './routes';
import InputPage from 'dummylib';
import Page from 'dummylib';
import ProcessingPage from 'dummylib';
import Modal from 'dummylib';
import LoadingSpinner from 'dummylib';
Vue.config.productionTip = false
Vue.use(DummyButton, {store});
Vue.use(InputPage, { store });
Vue.use(Page, { store });
Vue.use(ProcessingPage, { store });
Vue.use(Modal, { store });
Vue.use(LoadingSpinner);
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
how can i solve this problems...
thank you for watching my question with not good english.
i hope you understand my intension.

How to Inject Vuex store into Vue 3

How would I inject vuex into Vue 3, in Vue 2 it was possible like:
new Vue({
el: '#app',
store: store,
})
But in Vue 3 how would you do it since there is no new Vue().

The created store will be injected using .use method :
import { createApp } from 'vue'
import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
state () {
return {
count: 1
}
}
})
const app = createApp({ /* your root component */ })
// Install the store instance as a plugin
app.use(store)
For more details check the Vuex 4 docs
To use it in child component in options api, try to provide it as follows :
app.use(store)
app.config.globalProperties.$store=store;
then use it like $store in child components
for composition api (setup hook), you could just import the useStore composable function which returns the store instance :
import {useStore} from 'vuex'
setup(){
const store=useStore()// store instead of `$store`
}

Together with Router:
import * as Vue from 'vue';
import App from './App.vue';
import router from './routes';
import {store} from "./store/store";
Vue.createApp(App).use(router, store).mount('#app');

How to correctly import Axios in vue 3 after creating new project with CLI?

I created a new project using:
vue create hello-world
Generating a new project that includes the HelloWorld.vue, app.vue, main.js (etc ...) files.
Now I install Axios by following the docs Npm vue-axios:
npm install --save axios vue-axios
I import Axios in the main.js file:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
And now I run into a problem that I don't understand. The VueAxios docs say you simply use it like so:
const app = Vue.createApp(...)
app.use(VueAxios, axios)
But the way app is created in Vue 3 is different. I think this is where the problem comes from:
createApp(App).mount('#app')
So, how do I correctly import axios?

createApp(App).mount('#app') is effectively the same as:
import Vue from 'vue'
const app = Vue.createApp(App)
app.mount('#app')
// or
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')
So following Vue Axios's docs, just insert the line for app.use():
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(VueAxios, axios) // 👈
app.mount('#app')
You could also chain it like this:
createApp(App).use(VueAxios, axios).mount('#app')
demo

You could import only axios and define it as a global property :
Using a bundler (vue cli, vite or webpack ...):
import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios
then use it in any child component like:
Option api :
this.axios.get(...)
in Composition api I recommend to import it directly like :
import axios from 'axios'
const MyComponent = {
setup() {
//use axios here
....
}
}
or you use useAxios from the vueuse (vue composition utilities) :
import { useAxios } from '#vueuse/integrations/useAxios'
...
setup() {
const { data, isFinished } = useAxios('/api/posts')
}

This worked for me at VueJS 3.
npm i vue-axios
import { createApp } from "vue";
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App);
app.use(VueAxios)
app.use(axios)
app.mount("#app");
this.axios.get(api).then((response) => {
console.log(response.data)
})
Doc link:
https://www.npmjs.com/package/vue-axios

Laravel Vue.js component registration

I am creating a simple Vue.js application with Laravel. I have registered Vue.js with:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
If I create a custom component, this works just fine:
Vue.component('nav-section', {
template: `<div>This is odd</div>`
});
I can then call <nav-section></nav-section> in any given template, and it will output "This is odd."
However if I use Laravel's require method like so:
Vue.component('nav-section', require('./components/Navigation'));
It is not working anymore. <nav-section></nav-section> is empty, blank.
No errors in npm or console. Am I missing something, or some logic behind require?
Navigation.vue:
<template>
<div>
<span>Sample text</span>
</div>
</template>
<script>
export default {}
</script>
Vue.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
Vue.component('nav-section', require('./components/Navigation'));
const app = new Vue({
el: '#app',
components: {
App
},
router,
});

Try writing it out like this, with the extension and default:
Vue.component('nav-section', require('./components/Navigation.vue').default);