Tips for leveraging Typescript in .vue files utilizing VS Code?

Question

Tips for leveraging Typescript in .vue files utilizing VS Code?

I have set up my development environment using Visual Studio Code, Vue 2 (webpack template), and Typescript.

Below is the code snippet for my App.vue component:

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default {
        components: {
            Navbar
        }
    }
</script>

Question 1: Everything is functioning correctly, but I am looking to enable intellisense within the <script lang="ts"> tag similar to .ts files. How can this be accomplished?

Question 2: In my main.ts file, I use import App from './App'. However, VS Code highlights "./App" in red as it cannot locate the .ts file. Is there a way to make the editor recognize .vue files before compilation (during editing)?

Update (2018-03-25): For those interested in setting up Typescript in a Vue project, I highly recommend reading this article.

typescript vue.js visual-studio-code vuejs2

Answer 1

Answer №1

To address Q1, place the Typescript code in a separate file named script.ts and include it in the App.vue file as shown below:

<script lang="ts">
   import s from './script'
   export default s
</script>

Regarding Q2, as suggested by user @Oswaldo, you can create a file named vue.d.ts with the following content:

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

If you save this file in the ${Project_ROOT}/typings directory, make sure to add it to your tsconfig.json like so:

"typeRoots": ["./typings"]

Now, you can import files ending with .vue using the proper syntax:

import App from './App.vue'

If you prefer not using the .vue extension, organize all Vue components in a specific folder like src/components and adjust the vue.d.ts accordingly:

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

The alias src is set in webpack.base.conf.js to represent an absolute path.

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

After making these adjustments, use the full path to import a component without the need for the .vue extension:

import App from 'src/components/App'

While these solutions may not be the most elegant, they effectively eliminate any red underlines that are present.

Answer 2

To address Q1, place the Typescript code in a separate file named script.ts and include it in the App.vue file as shown below:

<script lang="ts">
   import s from './script'
   export default s
</script>

Regarding Q2, as suggested by user @Oswaldo, you can create a file named vue.d.ts with the following content:

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

If you save this file in the ${Project_ROOT}/typings directory, make sure to add it to your tsconfig.json like so:

"typeRoots": ["./typings"]

Now, you can import files ending with .vue using the proper syntax:

import App from './App.vue'

If you prefer not using the .vue extension, organize all Vue components in a specific folder like src/components and adjust the vue.d.ts accordingly:

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

The alias src is set in webpack.base.conf.js to represent an absolute path.

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

After making these adjustments, use the full path to import a component without the need for the .vue extension:

import App from 'src/components/App'

While these solutions may not be the most elegant, they effectively eliminate any red underlines that are present.

Answer 3

Answer №2

Regarding question 2, vue-class-component provides a solution through its sfc.d.ts file. I hope this proves helpful to you. If you have any insights on question 1, please do share them with me.

Answer 4

Regarding question 2, vue-class-component provides a solution through its sfc.d.ts file. I hope this proves helpful to you. If you have any insights on question 1, please do share them with me.

Answer 5

Answer №3

When exploring Q1, I discovered a useful VS Code extension titled vetur that provides intellisense support.

In relation to Q2, the solution cannot be implemented using .vue files; instead, one must utilize .ts files with a template embedded within.

Answer 6

When exploring Q1, I discovered a useful VS Code extension titled vetur that provides intellisense support.

In relation to Q2, the solution cannot be implemented using .vue files; instead, one must utilize .ts files with a template embedded within.

Tips for leveraging Typescript in .vue files utilizing VS Code?

Answer №1

Answer №2

Answer №3

Similar questions

Scroll effortlessly to the middle, bottom, and top of the page in vue.js using arrow keys for a seamless

Nuxt Fire / Firebase Vuex does not recognize $fireDb

How can I ensure that TypeORM, Type GraphQL, Apollo Server, and Azure Functions work together seamlessly?

VSCode Troubleshooting: When TypeScript Doesn't Recognize Installed Libraries

Importing an anonymous ES5 function using Typescript

Remove focus from input field after submitting in a project using Typescript and React with react-hook-form

What is causing me to receive an array filled with null values instead of an array with zeros?

Utilizing an Angular Service within a method, embedded in a class, nested inside a module

Animating nested child routes with framer-motion in react-router-dom version 6.4.3

What is the best way to connect a router link and dialog box in a dropdown menu using Vue.js?

Leverage i18n capabilities by integrating with data sourced from the Wordpress RestAPI

Utilizing various filters and sorting options on API response within Angular 8

Adjust the Vue class name dynamically

Error encountered: Attempting to use a class as a function in vue-socket.io is not permitted

Nuxt 3 Navigation: dynamic routes showing 404 error

Vuetify's v-text-field not recognizing custom label slot

Is there a way to automatically refresh a page as soon as it is accessed?

Issue with tsconfig path alias not resolving when paths are outside of the baseUri

Executing asynchronous methods in a Playwright implementation: A guide on constructor assignment

Choosing a particular element within a v-for loop in Vue.js 2