this.$axios in action



  • I’m using version 1 so I have a the file: boot/axios.js that looks like this:

    import axios from 'axios'
    export default async ({ Vue }) => {
      Vue.prototype.$axios = axios
    }
    

    Everything I’ve read says that this is all you need to be able to access it in a component, or in an actions (without importing), but it just won’t work.

    In a page for Login.vue If I have:

        methods: {
          this.$axios.get('some_url')
       }
    

    I’ll get an error:
    “TypeError: this.$axios is undefined”

    I’m using vuex also, and tried this in my store/auth/actions.js and I can’t get it there either.

    I originally had a class I made that was services/Auth.js
    and I could import axios from ‘axios’ in there and make get/posts, but the problem is that it doesn’t use the global axios that way, so any axios defaults or intercepters I configure on the boot version wouldn’t be seen by that class.



  • I can’t see why it’s not working for you, with too less info we wouldn’t know what’s wrong with your setup coz even starting a mock project with the setting you provide should work. https://quasar.dev/quasar-cli/ajax-requests#Introduction

    To your other issue https://quasar.dev/quasar-cli/cli-documentation/boot-files#Accessing-data-from-boot-files. You import the instance to your vuex action or whereever js file you need it.



  • Yeah, I can’t see either 😞 There really isn’t much more in this app, it’s mostly a toy to learn Quasar so just a few pages with some components just to check everything out, nothing crazy.

    Maybe i’ll just create a new project and try it there, just to see what could be different.

    I can get it to work using your second suggestion, Importing an axiosInstance, so thanks for that, and thanks for your fast response in general!



  • Hmm try posting what quasar info logs. Maybe youre missing some deps or etc… you can also pass vue instance to your vuex actions as params btw. Ie.

    // some vue file
    this.$store.dispatch('somemodule/someaction', { payload: somepayload, vm: this })
    // somemodule/actions.js
    export const someaction = ({payload, vm}) => {
      vm.$examplePrototypeMethod(...)
    ...
    

    Still prefer importing tho.



  • Here’s quasar info:

    Operating System - Darwin(18.6.0) - darwin/x64
    NodeJs - 11.8.0

    Global packages
    NPM - 6.9.2
    yarn - 1.13.0
    @quasar/cli - 1.0.0
    cordova - 9.0.0 (cordova-lib@9.0.1)

    Important local packages
    quasar - 1.0.5 – Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
    @quasar/app - 1.0.4 – Quasar Framework local CLI
    @quasar/extras - 1.2.0 – Quasar Framework fonts, icons and animations
    vue - 2.6.10 – Reactive, component-oriented view layer for modern web interfaces.
    vue-router - 3.0.7 – Official router for Vue.js 2
    vuex - 3.1.1 – state management for Vue.js
    electron - Not installed
    electron-packager - Not installed
    electron-builder - Not installed
    @babel/core - 7.5.5 – Babel compiler core.
    webpack - 4.35.3 – Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff.
    webpack-dev-server - 3.7.2 – Serves a webpack app. Updates the browser on changes.
    workbox-webpack-plugin - 4.3.1 – A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
    register-service-worker - 1.6.2 – Script for registering service worker, with hooks

    Quasar App Extensions
    @quasar/quasar-app-extension-icon-genie - 1.0.1 – A Quasar CLI Extension for Making All Your Icons
    @quasar/quasar-app-extension-dotenv - 1.0.0-beta.10 – Load .env variables into your quasar project

    Networking
    Host - pacman2.local
    en0 - 192.168.1.210



  • Also thanks for the tip on passing the vue instance.



  • It might not be related but in any case update your yarn, and downgrade your node js version to lts (10.+). Delete node_modules and yarn.lock / package_json.lock, and issue yarn in your project folder again once done. Also, you didnt specify what mode are you trying (ssr/spa/pwa etc…), so please see the docs for section relevant to the mode youre using.



  • that actually worked my man!

    Node 10.16 and Yarn 1.17.3

    I suppose we can’t be sure if it was the version change, or just the total reset of all the packages, but yeah, this.$axios.get(’…’) can be used from the component now.

    I think to get in the actions I’ll need to pass the vue instance and dig it out of there like you mentioned but progress! Thanks!



  • Ok, glad it worked.



  • I am also facing the issue. But I have try the following steps, I still not able to resolve it.

    /var/www/html/src-spa # quasar info
    
    Operating System - Linux(4.9.184-linuxkit) - linux/x64
    NodeJs - 10.16.0
    
    Global packages
      NPM - 6.9.0
      yarn - 1.16.0
      @quasar/cli - 1.0.0
      cordova - Not installed
    
    Important local packages
      quasar - 1.0.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 1.0.4 -- Quasar Framework local CLI
      @quasar/extras - 1.2.0 -- Quasar Framework fonts, icons and animations
      vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.0.7 -- Official router for Vue.js 2
      vuex - 3.1.1 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @babel/core - 7.5.5 -- Babel compiler core.
      webpack - 4.35.3 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
      webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.6.2 -- Script for registering service worker, with hooks
    
    Quasar App Extensions
      *None installed*
    
    Networking
      Host - bb995cc2b4a5
      eth0 - 172.17.0.4
    
    /var/www/html/src-spa # 
    

    Below is my quasar.conf.js

    module.exports = function (ctx) {
      return {
        // app boot file (/src/boot)
        // --> boot files are part of "main.js"
        boot: [
          'i18n',
          'axios'
        ],
    
        css: [
          'app.styl'
        ],
    
        extras: [
          // 'ionicons-v4',
          'mdi-v3'
        ],
    
        framework: {
          // iconSet: 'ionicons-v4',
          // lang: 'de', // Quasar language
    
          // all: true, // --- includes everything; for dev only!
    
          cssAddon: true,
    
          components: [
            'QLayout',
            'QHeader',
            'QDrawer',
            'QPageContainer',
            'QPage',
            'QToolbar',
            'QToolbarTitle',
            'QBtn',
            'QIcon',
            'QList',
            'QItem',
            'QItemSection',
            'QItemLabel',
            'QForm',
            'QInput',
            'QBanner',
            'QDialog',
            'QAvatar'
          ],
    
          directives: [
            'Ripple',
            'ClosePopup'
          ],
    
          // Quasar plugins
          plugins: [
            'Notify'
          ]
        },
    
        supportIE: false,
    
        build: {
          distDir: '../public/',
          scopeHoisting: true,
          vueRouterMode: 'history',
          // vueCompiler: true,
          // gzip: true,
          // analyze: true,
          // extractCSS: false,
          extendWebpack (cfg) {
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/,
              options: {
                formatter: require('eslint').CLIEngine.getFormatter('stylish')
              }
            })
          },
          env: {
            api: JSON.stringify(
              ctx.dev
                ? 'http://localhost/api' // local dev env
                : 'http://prod.tld/api' // production end-point
            )
          }
        },
    
        devServer: {
          https: false,
          port: 8880,
          open: false, // opens browser window automatically
          proxy: { '/api': { target: 'http://localhost' } }
        },
    
        // animations: 'all', // --- includes all animations
        animations: [],
    
        ssr: {
          pwa: false
        },
    
        pwa: {
          // workboxPluginMode: 'InjectManifest',
          // workboxOptions: {}, // only for NON InjectManifest
          manifest: {
            name: 'SSASoft Backoffice',
            short_name: 'SSASoft App',
            description: 'SSASoft Backoffice for Singapore Soka Association',
            display: 'standalone',
            orientation: 'portrait',
            background_color: '#ffffff',
            theme_color: '#027be3',
            icons: [
              {
                'src': 'statics/icons/icon-128x128.png',
                'sizes': '128x128',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-192x192.png',
                'sizes': '192x192',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-256x256.png',
                'sizes': '256x256',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-384x384.png',
                'sizes': '384x384',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-512x512.png',
                'sizes': '512x512',
                'type': 'image/png'
              }
            ]
          }
        },
    
        cordova: {
          // id: 'org.cordova.quasar.app',
          // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
        },
    
        electron: {
          // bundler: 'builder', // or 'packager'
    
          extendWebpack (cfg) {
            // do something with Electron main process Webpack cfg
            // chainWebpack also available besides this extendWebpack
          },
    
          packager: {
            // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
    
            // OS X / Mac App Store
            // appBundleId: '',
            // appCategoryType: '',
            // osxSign: '',
            // protocol: 'myapp://path',
    
            // Windows only
            // win32metadata: { ... }
          },
    
          builder: {
            // https://www.electron.build/configuration/configuration
    
            // appId: 'src-spa'
          }
        }
      }
    }
    

    Below is my axios.js

    import axios from 'axios'
    
    export default async ({ Vue }) => {
      Vue.prototype.$axios = axios
    }
    
    

Log in to reply