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

Error: Unable to locate module during module creation

I encountered an error while trying to import a module in my test application. ../fetchModule/index.js Module not found: Can't resolve './Myfetch' in '/Users/******/nodework/fetchModule' Here is the folder structure: And her ...

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

Retrieve the data stored in an array of objects

code props.thumbnails.forEach(value=>{ console.log(value.photo.thumbnail_url); }) error TypeError: Cannot read property 'thumbnail_url' of undefined Trying to loop through props.thumbnails array and access the thumbnail_url pro ...

The PHP counter conceals the comma upon loading and does not display it permanently

I'm currently working on a PHP counter and encountering an issue with the comma display. I have implemented Number Format in a PHP function to print counter digits with commas every 3 digits, but the comma doesn't remain visible after the page lo ...

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

Using the mt-downloader module in a Node application is a straightforward process

Hey there, I'm looking to incorporate the Multi downloader module into my project. I've checked out the GitHub link, but unfortunately, there are no examples provided on how to actually use this module. I came across this example and tried implem ...

Is there a way to add 100 headings to a webpage without using a loop when the page loads

Just joining this platform, so please be patient with me! The task at hand is to insert 100 h3 headings on page load ("Accusation 1, Accusation 2, Accusation 3,...Accusation 100"). We are restricted to using only 1 loop throughout the lab, which will also ...

I am finding the event naming conventions in Vue 3 to be quite perplex

In the parent component, there is a child component: <upsetting-moment-step :this-step-number="1" :current-step-number="currentStepNumber" @showNextStep="showNextStep" ></upsetting-moment-step> The par ...

Email notification will be sent upon form submission to Firestore

I'm currently designing a website for booking reservations through an HTML form, with data submission to firestore. Upon submission, a confirmation email is sent to the customer. Below is the code snippet I am using to achieve this: var firestore = fi ...

jQuery load() function triggers unexpected error in jQuery plugin

Here is the current structure of my page: <body> <div id="menuBar"> </div> <canvas id="myCanvas" width="700" height="700" style="border:1px solid #000000;"></canvas> </body> <script src="../Scripts/jQuery.mazeBo ...

Accessing the user id in a Laravel controller through authentication

Currently utilizing the Laravel boilerplate, I am attempting to retrieve the user_id of the logged in user. However, I am encountering an error message that says: The class 'App\Http\Controllers\Frontend\Auth' cannot be fou ...

Send multiple values as arguments to a jQuery function

Beginner question ahead: I'm using the jquery function loadNewPicture() to upload pictures and the progress() function to track the percentage of the upload. Everything is functioning correctly. My query relates to the variables that can be passed t ...

Notification missing following execution of npm run commands

Why am I not receiving any notifications after running npm commands inside Vagrant and Homestead for Laravel? Everything works fine when I'm not in Vagrant. What could be causing this issue? Appreciate your help! ...

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

Bug in timezone calculation on Internet Explorer 11

I've spent hours researching the issue but haven't been able to find any effective workarounds or solutions. In our Angular 7+ application, we are using a timezone interceptor that is defined as follows: import { HttpInterceptor, HttpRequest, H ...

Best practices for locating unique symbols within a string and organizing them into an array using JavaScript

Here is an example string: "/city=<A>/state=<B>/sub_div=<C>/type=pos/div=<D>/cli_name=Cstate<E>/<F>/<G>" The characters A, B, C, and so on are variables, and their count is not fixed. Can you determine how many ...

When setting the Content-Type of an S3 object to 'image/jpeg' in NodeJS, it may appear as 'application/octet' in the S3 console

I am facing an issue with the Content-Type of an image stored in my JPEG buffer. While it uploads and downloads successfully from S3, I encounter errors when trying to send it via the Messenger API programmatically. The S3 console indicates that the actual ...

Is it necessary to use both Vue Router and Express when incorporating Firebase into your project?

I am embarking on creating a simple application that will encompass various views, user authentication, data collection, database storage, and backend functionality to process and display the stored information. My chosen technology stack consists of Vue. ...