vue-kst-auth

3.1.3 verified Sat Apr 25 auth: no javascript

Vue.js 2/3 authentication plugin providing a pre-configured Axios instance with custom headers and base configuration for login state management. Current stable version 3.1.3. Includes TypeScript type definitions. Differentiates by offering a simple plug-and-play setup with token handling out of the box, suitable for projects requiring quick auth integration. Release cadence is irregular.

Common errors

error Uncaught TypeError: Cannot read properties of undefined (reading 'get') ↓

cause Vue.prototype.$axios not assigned or Vue instance not available.

fix

Ensure Vue.prototype.$axios = _axios is called before creating the Vue instance in main.ts.

error Module '"vue-kst-auth"' has no exported member '_axios'. ↓

cause Importing as default instead of named import in TypeScript.

fix

Use import { _axios } from 'vue-kst-auth'

error Uncaught TypeError: _axios is not a function ↓

cause Attempting to call _axios() directly instead of using it as an object (Axios instance).

fix

Use _axios.get() or _axios.post(), not _axios()

Warnings

breaking In version 2.x, the exports were default exports; upgraded to named exports in 3.x. ↓

fix Change import { _axios, baseConfig } from 'vue-kst-auth'

deprecated Vue.prototype usage is deprecated in Vue 3. Use app.config.globalProperties instead. ↓

fix Replace Vue.prototype.$axios = _axios with app.config.globalProperties.$axios = _axios

gotcha The baseConfig object is reactive only in Vue 2; Vue 3 users may need to wrap with ref/reactive if mutations are needed. ↓

fix If using baseConfig in Vue 3, use import { reactive } from 'vue' and wrap the imported object if necessary.

Install

npm install vue-kst-auth

yarn add vue-kst-auth

pnpm add vue-kst-auth

Imports

_axios

wrong

import _axios from 'vue-kst-auth'

correct

import { _axios } from 'vue-kst-auth'

Named export, not default.

baseConfig

wrong

const baseConfig = require('vue-kst-auth').baseConfig

correct

import { baseConfig } from 'vue-kst-auth'

CommonJS require is accepted but preferred import syntax.

Vue.prototype.$axios

wrong

Vue.prototype.$axios = require('vue-kst-auth')._axios // avoid when using ES modules

correct

Vue.prototype.$axios = _axios // in main.ts

This plugin expects Vue.prototype assignment. For Vue 3 use app.config.globalProperties instead.

Quickstart

Demonstrates how to import and install the plugin in both Vue 2 and Vue 3, and use the configured Axios instance.

import { _axios, baseConfig } from 'vue-kst-auth'
// Vue 2
Vue.prototype.$axios = _axios
// Vue 3
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.$axios = _axios
// Usage in any component
this.$axios.get('/api/user').then(res => console.log(res.data))