Do we need to import Vue in every component when using Nuxt with TypeScript?

I recently integrated TypeScript into Nuxt using the guidelines provided in the documentation:

However, I have a specific question regarding component setup. Should I always include import vue from "vue" and export default Vue.extend ({}); in all components? The documentation shows an example with one component (), but I'm unsure if this is necessary for every component or if there's a more global approach.

I initially believed that my types/vue-shim.d.ts file handled this configuration for me, but it seems like my understanding was incorrect.

vue-shim.d.ts:

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

Prior to adding TypeScript to Nuxt, my components looked like this:

<script>
import comp from "../component.vue";
export default {
  components: {
    comp
  },
  data() {
    return {
      createUser: true,
      params: {
        rol_id: 0,
        post_url: "",
        update_url: ""
      }
    };
  },
  mounted() {
    this.params.post_url = this.$config.routePrefix + "/agency/";
    this.params.update_url = this.$config.routePrefix + "/agency/";
    if (this.$route.params.uuid !== undefined) {
      this.createUser = false;
    }
  },
  methods: {
    fetchForms() {}
  }
};
</script>

Answer №1

It is not mandatory to import vue in every component.

According to the documentation, using Vue.extend is only necessary for enabling type inference in your TypeScript IDE. For example, it allows TypeScript to deduce the type of this.params in mounted() based on how params is defined in data().

Vue.extend does not introduce any new features, so your component would function similarly with or without Vue.extend. Nevertheless, to fully leverage TypeScript's capabilities, it is recommended to utilize Vue.extend in your components.

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

The data retrieved from the web API is not undergoing the necessary conversion process

I am facing an issue with a web API call where the property checkNumber is defined as a double on the API side, but I need it to be treated as a string in my TypeScript model. Despite having the property defined as a string in my model, it is being receive ...

How do I customize the rounding and color of selected dates in Vue Tailwind Datapicker?

I am looking to give the selected data a more square rounding. Additionally, I need help with specifying colors in the tailwind.config file that will be compatible with this component. The vtd-primary color currently does not work. https://i.sstatic.net/S ...

Is it possible for a class method in Typescript to act as a decorator for another method within the same

Can we implement a solution like this? class A { private mySecretNumber = 2; decorate (f: (x :number) => number) { return (x: number) => f(this.mySecretNumber * x); } @(this.decorate) method (x: number) { return x + 1; } } I h ...

What is the best way to manage destroyed objects?

I've been working on a PIXI.js application and I'm faced with the challenge of managing resources to prevent memory leaks. To address this issue, I am utilizing the DisplayObject.destroy method. When a display object is destroyed, many of its in ...

Using Angular to display asynchronous data with ngIf and observables

In cases where the data is not ready, I prefer to display a loader without sending multiple requests. To achieve this, I utilize the as operator for request reuse. <div class="loading-overlay" *ngIf="this.indicatorService.loadingIndicators[this?.indic ...

Form remains unchanged after manipulation in callback

Currently, I have a form with a list of editable objects (constants). Previously, it was possible to delete any object without confirmation. Now, I want to add a ngBootbox confirm step before the deletion process. In my .ts file, the code for deleting an ...

Analyze the information presented in an HTML table and determine the correct response in a Q&A quiz application

I need to compare each row with a specific row and highlight the border accordingly: <table *ngFor="let Question from Questions| paginate: { itemsPerPage: 1, currentPage: p }"> <tr><td>emp.question</td></tr> <tr> ...

Guide on creating and dynamically appending an element to the DOM in VueJS triggered by a user clicking a button

I'm having an issue with my vue webapp. I want to make a square shape appear on the screen where a user clicks, but for some reason, my code isn't working as intended. Can someone help me figure out what's wrong? <template> <di ...

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

Create a validation rule in yup that depends on an external condition

I am currently attempting to set a condition based on a prop that is passed to a VueJS object. After researching some solutions, I noticed they all focus on using .when. However, .when is typically used when you need to establish a condition based on anot ...

Utilizing a d.ts Typescript Definition file for enhanced javascript intellisene within projects not using Typescript

I am currently working on a TypeScript project where I have set "declaration": true in tsconfig.json to generate a d.ts file. The generated d.ts file looks like this: /// <reference types="jquery" /> declare class KatApp implements IKatApp ...

Navigating through Vue.js development environments using relative paths

I'm encountering difficulties with navigating paths between the development and production environments in a project involving Laravel and Vue.js. Regarding CSS files: In the development environment, using npm run hot requires absolute paths in URLs ...

How can you utilize a JavaScript library that provides global variables in Typescript?

I am closely adhering to the guidance provided in the official manual for declaration. Global library // example.js example = 20; Declaration file // example.d.ts declare const let example: number; Implementing the declaration file and library // ind ...

Generate a collection of elements using a different collection as a reference

I am struggling with an array of objects: let data = [{ createdDate: "2222", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087c6d7b7c3d487c6d7b7c266b6765">[email protected]</a>", histories: [ ...

Reactivity in Vue.js powered by ES6 classes

I am attempting to create a computed property in Vue.js that is associated with an ES6 class. Here is an example of my Vue instance setup: ... props: ['customClass'], computed: { localClass: { get() { return this.custom ...

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

Does tns preview offer support for Vuex?

Since integrating Vuex into my NativeScript-Vue mobile app, I have encountered an issue where tns preview fails to resolve modules that rely on Vuex. Interestingly, the application functions properly when using tns run or tns build. This problem is prese ...

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

I'm trying to determine the number of days in the moment-jalaali package for NodeJS. Despite checking their API on GitHub, I couldn't find any reference to a specific method like numOfDay. ...

The power of Vue reactivity in action with Typescript classes

Currently, I am working on a Vue application that is using Vue 2.6.10 along with Typescript 3.6.3. In my project, I have defined a Typescript class which contains some standard functions for the application. There is also a plugin in place that assigns an ...

Exploring Vue: A Guide to Utilizing Directives Provided by Libraries

I am attempting to utilize the library found here: https://github.com/rigor789/vue-scrollto However, I am encountering difficulties with utilizing it and the provided instructions are not very clear. The instructions state that I should do the following: ...