Something like "appendTsSuffixTo" for Vuejs

[dmitry-kurmanov]

Hello! Thanks for your work! In vuejs we have .vue files. So in ts-loader we have "appendTsSuffixTo" for that. What about something like that in atl ?

[Cyken-Zeraux]

Also looking for this. Exampled use here: https://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js

[KhraksMamtsov]

Yes, it will be good feature. Now TS don't support importing *.vue files (Can't find module error). And hack with suffixing *.vue with ".ts" at compile-time is way what use ts-loader. But ts-loader anyway generate error message and sequence ts-loader(target es6) -> babel-loader don't work.

So if you will implement this feature please keep in mind. Thanx

[Adam-Meisen]

Hey, I forked the repo and added this. I'll make a PR after doing some more work on it. https://github.com/Adam-Meisen/awesome-typescript-loader/

EDIT: Oh, if you try it out, just be aware that the config option has to be an array of strings, not RegExp objects. Example usage:

// after cloning and installing the repo, make sure you build it with 'npm run build'
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      ts: {
        // put the path (relative or absolute) to the cloned repo below
        loader: path.resolve(__dirname, '../awesome-typescript-loader/dist/index.js'), 
        options: {
          appendTsSuffixTo: ['\\.vue$'],
        },
      },
    },
    esModule: true,
  },

[holiber]

@Adam-Meisen any update?

[Adam-Meisen]

The only reason I didn't end up making a PR is because I don't really know what side effects internally renaming .vue files to .ts might have. Otherwise, it's a pretty simple change and I'll work on it some more, now that I know there's interest.

[wendel841]

+1 for this issue. Can this be resolved in the same way that ts-loader do?

[cnnblike]

+1 for this issue. I love the awesome-ts-loader, but it seems like it's a necessity for typescript to use with vuejs. I'm using ts-loader instead at this time point.

[RehanSaeed]

Also using ts-loader in the mean time which is slow. Tried to use fork-ts-checker-webpack-plugin to speed it up but it has problems with imports and having to use tsconfig.json to tell it which files to transpile goes against the principles of how Webpack is supposed to work.

[roszell]

Any luck? Would like to go back to awesome-ts-loader instead of ts-loader to load .vue typescript files.

[thomthom]

@KhraksMamtsov - I'm also looking to use webpack with .vue files with TypeScript, with a target of ES5. But I struggle to find a solution. Sounds like you had similar challenge - did you find a solution?

[odrozd]

@thomthom I've successfuly using VUE + TypeScript + Webpack + ES5, but with ts-loader. If you need tip just let me know.

[thomthom]

@odrozd In combo with .vue single file components? If so, I'd love to hear about your setup!

[odrozd]

@thomthom confirmed it works with single file components. For IDE intellisense I use vue-class-component decorator. But in the end components works as expected

[thomthom]

@odrozd I'd love to hear more, but maybe we should take this to a separate discussion? (I have already started one on a forum: https://laracasts.com/discuss/channels/vue/webpack-vue-typescript-es5)

[odrozd]

@thomthom I dont have an account on that forum discussion, so I will leave it here: you can use this repo as a template: https://github.com/Microsoft/TypeScript-Vue-Starter I have almost the same only with some different libraries versions

[gettinToasty]

It's been a while since there's been any mention here, has there been forward progress?

[akoidan]

Bumping the thread, any updates?