Issue (@websanova/vue-auth): http plugin has not been properly configured in drivers/http/axios.js

I've been working on integrating vue-auth into my laravel-vue application, but I'm encountering some console errors:

Error (@websanova/vue-auth): drivers/http/axios.js: http plugin has not been set.

Uncaught TypeError: this.plugins.http is undefined.

Below is the content of my app.js:

import 'core-js/stable'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueAxios from 'vue-axios'
import CoreuiVue from '@coreui/vue'
import { iconsSet as icons } from './assets/icons/icons.js'
import store from './store'
import VueAuth from '@websanova/vue-auth/dist/v2/vue-auth.esm.js';
import auth from './auth';


Vue.prototype.$apiAdress = 'http://127.0.0.1:8000'
Vue.config.performance = true
Vue.use(CoreuiVue)
Vue.use(VueAuth,auth)

new Vue({
  el: '#app',
  router,
  store,  
  icons,
  template: '<App/>',
  components: {
    App
  },
})

Additionally, here is the content of my auth.js:

import Vue from 'vue'
import bearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm'
import axios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm';
import router from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm';

// Auth base configuration with various options

const config = {
    plugins: {
        http: Vue.axios, 
        router: Vue.router,
    },
    drivers: {
    auth: bearer,
    http: axios,
    router: router,
    tokenDefaultName: 'token',
    tokenStore: ['localStorage'],
    rolesVar: 'role',

    // Other configurations go here...

}

export default config   

I have been following the tutorial at for guidance. Any help in identifying what I might be doing wrong would be greatly appreciated. Laravel Framework 8.6.0 and vue": "^2.5.17".

Thank you in advance.

Answer №1

Fortunately, I was able to find a resolution with the help of the tutorial guides from .

Once the websanova/vue-auth plugin is installed, there are specific dependencies that need to be configured beforehand.

Router Configuration:

The Vue.router needs to be configured to align with the router driver that comes with the plugin installation.

HTTP Settings:

An HTTP plugin must be set up to correspond with the http driver included in the plugin.

Configuration and Setup:

Refer to the Git repository for configuration details: https://github.com/websanova/vue-auth/tree/master/demos/2.x/src

I followed the instructions outlined in the main.js file of the git repository setup.

Following these steps, I successfully resolved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Webpack and Vue.js: Error - Definition missing for template or render function

I am encountering an issue while attempting to load a component in my root Vue instance. The error message I receive is displayed above. Below is the content of the main.js file: "use strict"; require('./../shared/bootstrap'); // loads jquery, ...

Display the active item in ng-repeat using conditional ui-view

Here is the situation: I'm working with a list of items that are displayed using ng-repeat. Each item has its own template. When a user clicks on an item, that particular item is marked as "active" and gets a different template compared to the rest ...

producing base64 encoding that results in a blank image

I have some code that is supposed to get an image from a video using canvas. However, when I save this base64 code into an image, I end up with a black image. What could be causing this issue? Here is my JavaScript code: var input = document.getElementBy ...

The issue in AngularJS 1.4 where the select element value is not binding due to a type mismatch

My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...

What is the best way to set the sidebar height to 100% in Material-UI?

Trying to learn MUI and encountered a problem. I want the sidebar to cover the full height, I tried 100vh but it stops increasing when the table extends. Using 100% only covers the end of the list. Is there another way to solve this, or is it fine becaus ...

Creating point illustrations with Three.js

Looking to incorporate random points into a web project using Three.js. Here's the current code: <script type="module"> import * as THREE from 'https://threejs.org/build/three.module.js'; import { TrackballControls ...

CodeIgniter Flexi Auth - Redirect users promptly upon login expiration

Is it possible to use the CodeIgniter Flexi Auth library to redirect a user to the login page immediately upon session expiration, displaying a message stating: "Your login has expired, please login again," rather than waiting until page load? I'm co ...

Trigger the opening of a Vuetify v-dialog when the mouse leaves

I want to trigger a v-dialog when the user exits the window. This is what I have implemented: <v-dialog v-model="showPopinAlert"> <v-card>alert</v-card> </v-dialog> and in my script, the event is in mounted(): data () { ...

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

Node.js exporting fails due to an undefined variable

When attempting to export variables in Node.js, I keep receiving an undefined error. I'm not sure what the issue is, can anyone provide assistance or suggestions? Here is a snippet from index.js: var test = 10; module.exports.test = test; And here i ...

Deduce the generic types of conditional return based on object property

My goal is to determine the generic type of Model for each property. Currently, everything is displaying as unknown[] instead of the desired types outlined in the comments below. playground class Model<T> { x?: T } type ArgumentType<T> = T ...

Error occurs when attempting to write to a Node stream after it has already

I'm experimenting with streaming to upload and download files. Here is a simple file download route that unzips my compressed file and sends it via stream: app.get('/file', (req, res) => { fs.createReadStream('./upload/compres ...

Is there a way to effortlessly upload numerous files in one go when browsing with jquery or JavaScript?

Currently working on a web application and looking to enable multiple file upload functionality within a single browse session, as opposed to selecting one file at a time. The goal is for users to be able to easily select multiple files with just one clic ...

It appears that Apexcharts is not compatible with React/Next.js

Issue Encountering a crash in my Next.js/React/Node application whenever I utilize import Chart from "react-apexcharts" in any file. Upon attempting to access the app, an error message is displayed: Server Error ReferenceError: window is not ...

Regular expression that matches a string with optional leading and trailing spaces and a hyphen in the middle

I need help creating a JavaScript regex that can match strings like the examples provided. The string may have whitespace at the front, back, or both but not within the string itself. Examples: 'Z5LW-KRT2' MATCH ' Z5LW-krt2' ...

Verify whether a specific value is present in an array (Laravel or Php)

I have the following array: $list_desings_ids = array('hc1wXBL7zCsdfMu','dhdsfHddfD','otheridshere'); When I use die() + var_dump() on this array, it returns: array:2 [▼ 0 => "hc1wXBL7zCsdfMu" 1 => " ...

Issue encountered: Failure to locate module 'socket.io' while attempting to execute a basic server JavaScript file

Below is my server.js file that I am attempting to run using node server.js: var app = require('express')(); var http = require('http').createServer(app); var io = require('socket-io')(http); //also tried socket.io instead of ...

Unable to display select options in Laravel blade due to Vue.js v-for issue

It is expected that the result will display the value of the id <select class="form-control" name="uploaded_segment_id" id="uploaded_segment_id" required=""> <option value="">Choose Segment</option> <option v- ...

Show particular classification in Laravel version 5

I am looking to find out how many categories there are in the database and retrieve a value for them. When I use echo on my index page, it returns the value 2 because there are Developer and Design categories. However, I only want to display the value for ...

Greetings! I am utilizing Laravel and Vue.js for my project. It was working perfectly, but now I seem to be encountering an error

Module parse failed: Unexpected token (1:0) You might need to configure a loader to handle this file type, as no loaders are currently set up. Refer to :// webpack . js .org/concepts#loaders > <template> | <div class="container&q ...