Hi i have a situation something like this
I have 2 files
main.js
utils.js
main.js
import { createApp } from 'vue'
import Utils from "./utils.js"
import router from "...."
import VueCookies from 'vue-cookies'
const app = createApp(App);
app.use(router);
app.use(VueCookies)
app.use(Toast,Utils.toastConfig())
app.mount('#app')
utils.js
import Vue from 'vue'
export default{
setCookie(params){
Vue.$cookies.set(params.name, params.value)
}
...
// so on related to Vue.$cookies
}
Note: above file usage is in multiple places, changing everywhere is not feasible now as we are migrated from vue2 to vue3
Question: Vue is undefined in utils.js how to make it work without much code changes
Related
hope you are well!
I am working in a project CRUD web application that handles user management. Create user, edit user, delete user.
First I set up my project install VueJS after that installed vue-bootstrap make import in file main.js.
For mocking the Backend I have used :
NPM install -g json-server
After that, create a new file called db.json that handles users in the root of a project.
I run command json-server --watch db.json to make record available.
http://localhost:3000/users
I have installed axis for us to be able to send and receive data from our backand.
So I have run command npm install axios.
But after it how I have import axios in file main.js, but I am not confident if is the right way?? Thanks
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import axios from 'axios'
//Import Bootstrap an BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.config.productionTip = false
Vue.use({
install (Vue) {
Vue.prototype.$api = axios.create({
baseURL: 'http://localhost:8000/users/'
})
}
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<script>
import axios from 'axios';
export default {
data() {
return {
posts: [],
errors: []
}
},
// Fetches posts when the component is created.
created() {
axios.get(`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Do the same as shown in the script example, it will work
Fetching data from external sources is considered as a "side-effect". Thus, according to me, you should perform such side effects inside a "mounted" life cycle.
Further, to make things more better, you can create an abstraction layer for fetching data from external APIs inside "mounted" life cycle.
To make things simple on your end, you can also consider Vue-Query.
the easiest way is to create a folder known as axios in your src then add index.js in it then put this code:
// axios/index.js
import axios from "axios";
export default axios.create({
baseURL: "http://127.0.0.1:8000/api/", //your base url here
});
then import this file as axios in your app main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import axios from "#/axios"; //import your custom axios
I don't know how to solve this problem.
When I started project vue3.js , console show me this error.
This import in pinia store.
I tryied change first line with import to
"import Vue from 'vue';" (without curcy braces), but error don't disappear.
import { Vue } from 'vue';
import { defineStore } from 'pinia';
import moment from 'moment';
import _ from 'lodash';
import router from '#/router';
if you are using latest version of vue , vue3
this code
import { Vue } from 'vue';
is no longer global instance
I recently ran an npm update on my Vue/Laravel app just to upgrade my version of Bulma. Of course, this brought up a dozen vulnerabilities which I decided to fix, and of course this screwed up my whole app, mainly thanks to Webpack and Mix issues. I finally got it everything to compile again with only a few SASS warnings, but when I run the app I get the following error:
Uncaught TypeError: Vue.use is not a function
Google seems to suggest this is a problem when upgrading to Vue 3, however I am still on Vue 2 (2.6). Here's my app.js:
require('./bootstrap');
import VueRouter from 'vue-router';
import router from './router/routes';
import VueConfirmDialog from 'vue-confirm-dialog'
import SkeletonBox from './components/shared/SkeletonBox.vue'
import ValidationErrors from './components/shared/ValidationErrorComponent.vue'
import Vuex from 'vuex';
import storeDefinition from './store'
import Index from './Index'
window.Vue = require('vue');
Vue.use(VueConfirmDialog);
// init the Router
Vue.use(VueRouter);
// Init the Vuex store
Vue.use(Vuex);
const store = new Vuex.Store(storeDefinition);
Vue.component("skeleton-box", SkeletonBox)
Vue.component("v-errors", ValidationErrors)
const app = new Vue({
el: '#app',
router,
store,
publicPath: './',
components:{
"index": Index
},
beforeCreate(){
// call loadStoredState action in store.js
this.$store.dispatch('loadStoredState');
}
});
I have absolutely no idea what I need to do to get this working - can anyone help?
I seem to not be able to use axios in my vue project as it's saying that 'axios' is not defined when I try using axios.get() in my file for Home.vue. Am I doing something wrong in main.js where I configure it? Or am I missing something that needs to be added? Below is my code for main.js and it shows how I'm adding axios to my project.
import Vue from 'vue';
import GSignInButton from 'vue-google-signin-button';
import ElementUI from 'element-ui';
import axios from 'axios';
import './assets/element-variables.scss';
import locale from 'element-ui/lib/locale/lang/en';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(ElementUI, { locale });
Vue.use(GSignInButton);
Vue.use(axios);
Vue.use(ElementUI);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Edit: The solution for this issue for me was to install a vue plugin called vue-axios and follow the steps to configure here: https://www.npmjs.com/package/vue-axios
Try to add axios as instance global property instead of Vue.use(axios);:
Vue.prototype.$axios=axios
then you could use it in any child component like this.$axios.get()
learn more about adding-instance-properties
I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.
I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Output warning terminal:
warning in ./src/plugins/bootstrap-vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/utils/vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?
Bootstrap Vue is not yet ready for Vue 3.
To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.
For example...
import { createApp } from 'vue';
import Router from './router/Router';
createApp({/* options */}})
.use(Router)
.mount('#app');
You can read more about this at the official docs.
https://v3.vuejs.org/guide/instance.html
https://v3-migration.vuejs.org
For vue 3 you can use
bootstrap-vue-3
Install: npm i bootstrap-vue-3
Config:
import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");