0

hope you are well! I am working in a project CRUD web application that handles user management. Create user, edit user, delete user.

  1. 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')
Mery
  • 45
  • 1
  • 9
  • For vue v2 -> https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html?redirect=true for vue v3 -> https://stackoverflow.com/questions/64269587/how-to-correctly-import-axios-in-vue-3-after-creating-new-project-with-cli – Serhii Yukhnevych Jun 23 '22 at 09:53

3 Answers3

0
<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

Davis Vlogs
  • 66
  • 4
0

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.

Utkarsh
  • 105
  • 4
0

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
muyah
  • 176
  • 7