Error message in Nuxt indicating a missing dependency when setting an alias in nuxt.config.js

Encountering an issue while attempting to import a file using a custom alias:

import api from 'api'

api in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/exercises.vue?vue&type=script&lang=js&

Below is my nuxt.config.js setup:

import { resolve } from 'path'
const _api = process.env.API_MOCK === '1' ? 'apimock': 'api'

export default {
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/router'
  ],
  alias: {
    'api': resolve(__dirname,  './helpers/' + _api)
  },
}

Reviewing my project's file structure reveals the following:

.
├── components
│   ├── drawer.vue
│   ├── popup-criar-treino.vue
│   ├── popup-treino.vue
│   └── toolbar.vue
├── helpers
│   ├── api
│   │   └── urls.js
│   └── apimock
│       ├── db_mock
│       │   └── db_mock.js
│       ├── mockadapter.js
│       └── urls.js
├── jsconfig.json
├── layouts
│   └── default.vue
├── nuxt.config.js
├── package.json
├── package-lock.json
├── pages
│   ├── exercises.vue
│   ├── index.vue
│   ├── plans.vue
│   └── treinos.vue
└── router.js

A bit puzzled as to what might be missing here, despite diligently following Nuxt documentation guidance provided at: https://nuxtjs.org/docs/configuration-glossary/configuration-alias/

Answer №1

It is recommended that you integrate the axios library into your api.js file

export default function ({ $axios, app }, inject) {
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'application/json',
        Authorization
      }
    }
  });
  inject('api', api)
}

Subsequently, include api in your plugins so it can be referenced as an alias throughout the application

  plugins: [    
    { src: '~/plugins/api.js' },
  ]

this.$api.get/post...

You also have the option to inject it into NuxtApp following the method suggested above;

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

Encountering a 404 error in production when refreshing on a Vue router subfolder

Currently, my Vue.js app is running in production on a subdomain with the configuration "base: '/my-app/'" set in vite.config.js (everything working smoothly so far). An issue arises when trying to access URLs like my-domain/my-app/my- ...

Enhancing Your React.js app with Script Insertion Using HTML/JSX

I'm attempting to apply a style to an HTML element only when the property of an array of objects meets a certain condition, but I encountered this error: /src/App.js: Unexpected token, expected "..." (35:25) Here's my code: codesandbox export de ...

Guide on sending a JSONP POST request using jQuery and setting the contentType

I'm struggling to figure out how to make a jsonp POST request with the correct content type of 'application/json'. Initially, I was able to send the POST request to the server using the jQuery.ajax method: jQuery.ajax({ type: ...

Retrieving user information from the database and adding it to the specified element

I've been grappling with what seems like a simple question for the past hour. Below is a script that I have which pulls all active reservations from the reservations table. require("../includes/connect.php"); function dispAllReservations(){ $i= ...

Connecting within a webpage without the use of the pound sign

I have a simple question as I am relatively new to programming, having only started about two weeks ago. I want to create a menu with three options: menu1, menu2, and menu3. My question is how can I create a link without using the hashtag (#)? For exampl ...

The error message "Mongo is not defined" appeared in Meteor version 1.0.3.1

I am in the process of developing a package that aligns with the guidelines in the Discover Meteor book. You can find more information about this process in the following link: Below is a snippet of my package.js file: api.use(['email1','e ...

Connect the drawer state in Vuetify when the navigation drawer and app bar are separate components

Currently, my Dashboard consists of two components: Dashboard <template> <v-app> <Toolbar :drawer="app.drawer"></Toolbar> <Sidebar :drawer="app.drawer"></Sidebar> </v-app> </template> ...

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

After completing several tutorials, I have successfully implemented my models from a library file (dll). Everything seems to be functioning correctly except for one issue. Here is my model: public class RoomBookingInsert { public Int32 CostCentreNo ...

The issue arises when the Javascript function is triggered twice, resulting in only 3 out of 4

I'm currently working on a JavaScript calculator project. Everything is running smoothly except for the add() function (subtraction, multiplication, and division are all functioning properly). Additionally, when I hit "=" it displays the answer twice ...

Experiencing difficulty in removing a row from an HTML table using jQuery DataTables

I have an HTML table populated with data from the database. My goal is to be able to delete a row from the HTML table without affecting the actual data in the database. Each row in the table has a delete button in the action column, and when clicked, tha ...

Encountering an issue while implementing a fresh design using Material-UI Version 5 and React Version 18.01 - Specifically facing problems with the '@mui/styles' package

Hi there! I am currently working with react V.18.01 and Material-ui v.5 for my application development, but encountered an error that I need assistance with. Being a beginner developer, I would greatly appreciate a code review to help me understand the iss ...

Looping through the key and value pairs of JSON data returned by AJAX using jQuery

Hello everyone, I am currently receiving the following JSON when making a call to my ajax ColdFusion .cfc page: "[{\"USERA\": \"LiveP\", \"STATE\": \"None Given\", \"ROLES\": \"District Administrator& ...

What is the best way to update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

Show data and messages directly on the screen

I am currently working on ajax, jquery, and javascript, but I am facing some issues. Although I can use this code to send data to the database, the data is not displayed in the view immediately after sending it; I have to reload the page to see it. Is th ...

Updating a Vanilla JS variable within the scope of an Angular JS controller: A step-by-step guide

let num = 1; function increaseCounter() { num++; } angular.module('myapp') .controller('MainCtrl', function($scope) { $scope.b = num; }); I am trying to continuously track the variable num within the scope ...

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

I recently came across a jQuery plugin for expanding and collapsing content. I am interested in adding a fade-in effect to this plugin specifically when the EXPAND button is clicked. How can I accomplish this? $(document).ready(function () { var maxlines ...

`The date result is displaying inaccurately`

My JSON result appears incorrect vr_date :Date alert(this.vr_date ) // The result displays Thu Feb 07 2019 00:00:00 GMT+0400 var json = JSON.stringify(this.vr_date); alert(json); // The result displays 2019-02-06T20:00:00.000Z, indicating an issue with ...

Code not functioning properly in Internet Explorer

In one of my JavaScript functions, I have the following CSS line which works well in all browsers except for IE (Internet Explorer). When the page loads, the height of the element is only about 4px. element.setAttribute('style', "height: 15px;") ...

Obtain an Array Following the For Loop

Struggling with grasping the concept of for loops in arrays. I'm attempting to develop a Thank You card generator and here are the steps I am endeavoring to execute: Initialize a new empty array to store the messages Loop through the input array, con ...

Engaging in payment processing

Currently facing a significant dilemma. I am utilizing Stripe as my payment gateway, which functions in a two-step process: Collect billing information to generate a token Charge the client using the generated token The issue arises because the token ca ...