Encountering an issue with importing a component in a mixin in NuxtJS

Currently, my main technologies are Nuxtjs and Nuxt-property-decorator

To prevent repeating a certain method, I created a mixin

This method requires the use of a component (Alert component)

In order to use the component in the mixin, I imported it

However, I encountered an error while importing the component

Note: I have double-checked that the import address is correct

mixin/logOut.ts import Vue from 'vue'

import { Component } from 'nuxt-property-decorator'
import AppAlert from '~/components/Common/AppAlert'
@Component
export class LogOut extends Vue {
  async LogOut() {
    const confirm = await this.$dialog.show({
      component: AppAlert,
      props: {
        title: { text: 'Exit ?', icon: 'exclamation-thick' },
        body: 'Exit Connector ?',
        btn: { text: 'Confirm', icon: 'power', color: 'error' }
      }
    })
    
    if (confirm) {
      this.$auth.logout()
    }
  }
}

https://i.sstatic.net/yjbVX.png

The error message states:

Cannot find module '~/components/Common/AppAlert' or its corresponding type declarations.ts(2307)

Answer №1

My solution was inspired by a helpful resource.

Incorporated the following code:

vue-shims.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

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

Insert the GET object into an empty object within the data and then send it back

Here is the Vue application I am working with: new Vue({ name: 'o365-edit-modal-wrapper', el: '#o365-modal-edit-wrapper', data: function() { return { list: {}, } }, created() { thi ...

There was an issue: Control with the name 'name' could not be located

Whenever I submit the form and try to go back, an error pops up saying "ERROR Error: Cannot find control with the name: 'name'". I'm not sure what I might be missing. Do I need to include additional checks? Below is my HTML file: <div ...

What is the process for deleting all views in Ionic 2 apart from the login view?

I created an Ionic 2 app with tabs using the following command: ionic starts project1 tabs --v2 Next, I added a new page and provider to the project: ionic g provider authService ionic g page loginPage After a successful login, I set the root to the Ta ...

Issue encountered while creating production build using Ionic

I've encountered a perplexing error that has me stumped. The error reared its head while attempting to build with --prod. Despite my efforts to fix it by updating dependencies, when I run ionic cordova build android --prod --verbose, the following er ...

Learn how to hide the dropdown menu in Angular 8 by detecting clicks outside of the menu area

Is there a way to hide the custom dropdown menu whenever I click outside of it? After trying the code below, I noticed that it hides even if I click on an element inside the dropdown menu: <button class="btn btn-primary btn-sm mt-1" type="button" id= ...

Please provide either a string or an object containing the proper key for TypeScript

Within my project, the languageSchema variable can either be a string or an object containing the 'Etc' key. The corresponding interface is defined as follows: let getLanguageSchema = (language: string): string => languagesSchemas[language]; ...

Encountering complications when importing TypeScript declarations

I am facing a problem with importing declarations from an extended file (I am utilizing this typing). As per the example, I have included this code in my project: import * as SockJS from 'sockjs-client'; import BaseEvent = __SockJSClient.BaseEve ...

What is the best way to toggle a card within a collection of cards using Angular?

Wishing you a wonderful day! I simply desire that when I click on a card, only that specific card flips over. But unfortunately, all the cards flip when I click on just one. HTML TypeScript ...

Vue.js is able to update various models based on selection from a form dropdown

I have a dynamic select list in my app built with vue.js. I am trying to update a "details" box on the page with information fetched through an ajax request. You can view the code here: https://jsfiddle.net/pznej8dz/1/ I am puzzled as to why the sf_detail ...

What external libraries does Angular 4 utilize during execution, aside from RxJS?

Angular 4 relies on RxJS types in its public API and also internally depends on RxJS. It would be beneficial to explore if Angular utilizes other external packages for certain functionalities, allowing us to incorporate them into our own projects. This ap ...

The unit test is running successfully on the local environment, but it is failing on Jenkins with the error code TS2339, stating that the property 'toBeTruthy' is not recognized on the type 'Assertion'

I've been tackling a project in Angular and recently encountered an issue. Running 'npm run test' locally shows that my tests are passing without any problems. it('should create', () => { expect(component).toBeTruthy();}); How ...

How to incorporate a JavaScript class into a VueJS project

Looking to incorporate a JavaScript class into my Vue application. The class structure is as follows: class className { constructor() { ... } function1() { ... } static funtion2() { ... } } Attemptin ...

Why is it necessary to omit node_modules from webpack configuration?

Check out this webpack configuration file: module.exports = { mode: "development", entry: "./src/index.ts", output: { filename: "bundle.js" }, resolve: { extensions: [".ts"] }, module: { rules: [ { test: /\.ts/ ...

Tips for formatting HTML-escaped content in Vue 2 and Vue 3

Currently, I am utilizing user-generated data in a Vue application and the default behavior of html-escaping the data works perfectly. However, I now wish to enable users to search through this data and highlight the matching text in the search results. Th ...

Best practice for importing ts files from an npm package

When faced with the need to divide a ts project into multiple repositories/packages for creating microservices, the challenge arises in combining these packages efficiently. Some packages are required in one microservice, others in another, and some in all ...

How to access properties of objects within an array in Angular 4

Is there a method to call only the $values from each rate record in my array that I want to read? This is what I have done to access this array: async ngOnInit() { this.product$ = await this.reviewService.getReview(this.product.$key); this.key = ...

The $refs property in Vue.js appears empty because of the v-if directive

I have a Vue component that showcases an address but transforms into a form to edit the address upon user interaction. The address input utilizes Google Maps API for autocompletion. Since the input field is hidden or non-existent half of the time, I need t ...

Add custom scripts to individual components within a Vue.js application

After extensive searching, I still can't seem to find a solution to my current issue. My focus is on a Vue project with vue-cli, where I need to inject various scripts into different pages (leveraging vue-router). Here are more specific details: Thi ...

Navigating through an interface array using *ngFor in TypeScript

After successfully implementing an interface to retrieve data from a service class, I encountered an issue when attempting to iterate through the FilteredSubject interface array. Despite using console.log, I was unable to achieve the desired outcome. You ...

The function this.listCatModel.push is not a valid operation

I have a dropdown that I want to populate using the following code: this.categoryService.GetListItem(this.GetAllcatListUrl).subscribe(data=>{ this.listCatModel=data, this.listCatModel.push({ id:0, name:'Main Category', parent ...