We Keep Coding

how to use Vuex in Laravel + Vue 3 project

working with Laravel + Vue 3 project. I need work with Vuex in the project. I have configure My Vuex in store.js file as following
import { createApp } from 'vue'
import { createStore } from 'vuex'
const store = createStore({
/* state, actions, mutations */
state : {
counter : 1000
}
});
const app = createApp();
app.use(store);
app.mount("#app");
and My app.js file as following
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'
import store from './store' //import store.js
createApp({
components: {
mainapp,
}
}).use(router).use(ViewUIPlus).mixin(common).mount('#app');
now I am unable to how to import store.js in to the app.js file. could you give some solution here

Important note: Vue core team members (including Vuex authors) highly recommend using Pinia instead of Vuex for new projects, on the very first page of Vuex docs.
You're currently creating two separate apps:
one in store.js (which has the store but nothing else)
one in app.js (which has everything but the store).
You probably want to add the store to the app in app.js, not to a separate app. You should export the store from store.js and import + use it into app.js:
store.js
export const store = createStore({
//...
})
app.js:
import { store } from './store'
const app = createApp({
//...
})
.use(router)
.use(store)
.use(ViewUIPlus)
.mixin(common)
.mount('#app')

Vuejs Authentication JWT VUEX

Hi i do vue authentication with jwt and vuex, and works well but i need to load token and user when i refresh page. i find online this code store.dispatch('auth/attemptAuthtoken', localStorage.getItem('authToken'))and works good but works only in main.js . I need to put it in index.js (main file of store) but if i use it i have problem with store/dispatch etc.
I try to import store but i've problem too.
Someone can help me to fix it? (I started very recently to use vue / vuex)
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import store from './store'
store.dispatch('auth/attemptAuthtoken', localStorage.getItem('authToken'))
store.dispatch('auth/attemptUser', JSON.parse (localStorage.getItem('user')))
axios.defaults.baseURL = 'https://**********/'
createApp(App).use(store).use(router).mount('#app')
index.js
import { createStore } from 'vuex'
import auth from './auth.js'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
auth
}
})

How to import Library into Vue3 project

could someone help me import a library to my vue3 project so that I can use it in all components?...
I'am trying to import 'moments.js' to my project
Its installed with npm
in my 'main.js' (entry) I import it like:
import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.use (moment)
app.mount("#app")
but when I try to console.log(this.moment) from another component I get errors that this.moment is not a function

You can bind moment as a global property on the Vue instance by during the created lifecycle hook in the like manner.
const { createApp } = require('vue');
import App from "./App.vue";
import moment from 'moment';
const MomentPlugin = function (Vue, options) {
Vue.mixin({
created: function () {
this.moment = moment
}
})
}
const app = createApp(App)
app.use(MomentPlugin).mount("#app");
moment function is then available in template context or anywhere the Vue instance is available in scope.

For anyone stumbling onto this post. I changed the code to:
import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.provide("moment", moment)
app.mount("#app")
inside other components:
export default {
inject: ["moment"],
// Other code can now use "moment"
}

I would try using this package
https://www.npmjs.com/package/vue-moment
as it is vue-specific. It is a wrapper for moment.
Check the Readme file also for instructions.
https://github.com/brockpetrie/vue-moment
import Vue from 'vue'
import VueMoment from "vue-moment"
Vue.use(VueMoment));
Your case
import { createApp } from "vue"
import App from "./App.vue"
import VueMoment from "vue-moment"
const app = createApp(App)
app.use (VueMoment)
app.mount("#app")

You can use moment like this in any component.
methods: {
moment: function () {
return moment();
}
},

app.use() is for adding Vue plugins to the app. It should be possible to convert Moment.js to a plugin - see "Writing a plugin" in the documentation but it shouldn't be necessary.
You can just import moment.js in any component where you want to use it and the bundling process will make sure that the code is not duplicated anywhere.

Vue and Vuex importing module in separate files

I think i have a rare question. I've separate main.js and store.js file, so in store.js file i've imported Vuex and setup a new vuex store then exported it. After that, i've imported this file in main.js file and set up its requirement (import Vuex again in main.js and Vue.use(Vuex) here). But it doesn't work in this way. I've to write Vue.use(Vuex) inside store.js file, Otherwise it throws this error: Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
main.js file:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import App from './App.vue'
import {store} from './store/store.js';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
and store.js file:
import Vuex from "vuex";
export const store = new Vuex.Store({
state: {
counter: 0
}
});
Although i've called import {store} from './store/store.js'; after Vue.use(Vuex), so Vuex instance inside store.js file doesn't get executed before Vue.use(Vuex)
I suspect that problem is webpack based, but i can't be sure.

Change store.js to import Vue and use Vuex:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
counter: 0
}
});
Then remove Vue.use(Vuex) from main.js file:
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
It's perfectly okay to have a use statement in store.js. This is in fact how it would be (at least at one point) generated using a tool like #vue/cli if you select the vuex option.
Hopefully that helps!

Vue.js: converting a new Vue().$mount() to an export for server side rendering

I have a Vue app that I'm trying to convert to server-side rendering.
Currently, the app attaches to the root HTML element through this file:
import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';
Vue.config.productionTip = false;
new Vue({
router,
...AppLayout,
store
}).$mount('#app');
I would like to export this root file for my server-entry.js file.
What's the most efficient way to do this? Should I refactor the main.js file? Should I create a separate file, the only purpose of which would be to pull in all the imports listed above and export an app, then import it and mount it in main.js? What would that look like?

Here is what I have right now, which works:
app.js:
import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';
Vue.config.productionTip = false;
const app = new Vue ({
router,
...AppLayout,
store
});
export {app, router, store};
main.js:
import {app} from './app';
app.$mount('#app');