Vue SFC support (Vetur) not working for you? There are simple ways out. (Possibly also other SFC's, e.g. Svelte.)

As I have complained about TypeScript support in SFC's, including Vue and Svelte. There seem to be simple ways out, at least for Vue.

Why are we using single file components in the first place?

Pacharapol Withayasakpunt ・ Aug 21 ・ 1 min read

#vue #svelte #discuss #typescript

Easiest way

Do you know that your HelloWorld.vue can be as simple as

<template src="./HelloWorld/index.html" />
<script lang="ts" src="./HelloWorld/index.ts" />
<style scoped lang="scss" src="./HelloWorld/index.scss">

Also, from my playing around, I can omit lang="ts", but not lang="scss".

Omitting *.vue extension

This is possible too, via Webpack settings.

// vue.config.js

module.exports = {
  configureWebpack (config) {
    config.resolve.extensions.unshift('.vue')
  }
}

Folderize everything

It is also possible to use ./HelloWorld instead of ./HelloWorld/index.vue (or ./HelloWorld.vue).

• ./HelloWorld/index.vue

<template src="./index.html" />
<script lang="ts" src="./index.ts" />
<style scoped lang="scss" src="./index.scss">

Noted that because you unshifted, instead of pushing, index.vue will be prioritized before index.ts.

Also, via this way, you can also create ./index.spec.ts (i.e. testing file).

Other kinds of Single File Components

I haven't tested with Svelte, but it would be nice, because I wouldn't have to worry about TypeScript support of Svelte language server of VSCode.

I believe it should also work.