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')

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!

Implement two Providers in React application

I am attempting to implement a Redux store into my react application. I am using Auth0 for Authentication and Authorization. I need to store data such as UserID and permissions into my store. Currently my index.js file is as follows:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Auth0Provider } from "./react-auth0-spa";
import config from "./auth_config.json";
import history from "./utils/history";
import {createStore} from "redux";
import rootReducer from './redux/reducer';
import {Provider} from "react-redux";
//create Redux store
const store = createStore(rootReducer);
// A function that routes the user to the right place
// after login
const onRedirectCallback = appState => {
history.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
};
ReactDOM.render(
<Auth0Provider
domain={config.domain}
client_id={config.clientId}
redirect_uri={window.location.origin}
audience={config.audience}
onRedirectCallback={onRedirectCallback}
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
Should the Provider for Redux wrap the Auth0 provider or should Auth0 wrap Redux?

It shouldn't matter. Everything nested inside of the two providers, regardless of which is wrapping the other, should have access to what they provide.

How to not import Vue in main js and store

I have import Vue in main.js and also in index.js where I created a Vuex store. How to import Vue only one time? Or it is normal?
Can I import Vuex and Vue only in mainjs and call that also in main.sj Vue.use(Vuex)?
main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'
import router from './router'
import VueCookies from 'vue-cookies'
import { i18n } from './plugins/i18n'
Vue.use(VueCookies)
Vue.store = store
App.router = Vue.router
App.i18n = i18n
App.store = store
new Vue(App).$mount('#app');
and index.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const store = new Vuex.Store({
modules: {
auth
},
strict: debug,
});
export default store;

It is not imported twice. It is registered in a namespace in such a way, that all the modules (files) importing it, refer to the same module.
Don't worry, it's not imported twice.