Bud-vue with typescript

I am trying to use Bud with Vue and Typescript. It is not really clear to me how to get this working.

  • I used this example to get Vue working with JS: @roots/bud-vue | bud.js
  • I installed bud-typescript and added a tsconfig.json, like the guide tells me

Typescript works, it compiles to JS, however my Vue templates do not compile (having lang=“ts”). I get this error in my browser’s dev tools:

Uncaught Error: Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

  • ./node_modules/vue-loader/dist/templateLoader.js
  • ./node_modules/vue-loader/dist/index.js
    You may need an additional loader to handle the result of these loaders.

Can someone please guide me how to get this working?

1 Like

I have the same problem.

I know we need to add in Ts rules:

options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}

when I do a console.log of the rules I don’t see that from ts or tsx, i try:

.tap((bud) => {
      bud.build.items.ts.setOptions({  appendTsSuffixTo: [/\.vue$/] });
    })

But ts or tsx is undefined

How to set ts-loader options ?

when i run yarn bud view build.config, i can see:

   Object {
            "include": Array [
              "/home/guto/8bitstudio/typescript/bedrock/web/app/themes/sage/resources",
            ],
            "test": /\.(tsx?)$/,
            "use": Array [
              Object {
                "ident": "ts",
                "loader": "/home/guto/8bitstudio/typescript/bedrock/web/app/themes/sage/node_modules/ts-loader/index.js",
                "options": Object {
                  "transpileOnly": true,
                },
              },
            ],
          },

How can i set options for add: appendTsSuffixTo: [/.vue$/] ?
Thanks for any help.