TypeScript template?

[italomaia]

Any chance for an official typescript template?

[Anonyfox]

This would be totally awesome. Ideally prepared with SSR from the start. My company wants to move a fairly big & critical Vue2/Vuex2 core app from ES7 to typescript and I currently try to figure out everything necessary, but there doesn't seem to be much information on google. :(

AFAIK since the typescript 2.1 release, one can totally remove Babel from the build pipelines, since TS can now compile async/await directly to ES5. ESLint can be substituted with TSLint, Vue2 already has typescript typings included, and so on. I just do not have any expertise in webpack so I just hope for anyone to step in here.

[italomaia]

I tried stitching ts-loader and typescript to a plain webpack project, mimicking https://github.com/AbeHaruhiko/vue-webpack-typescript without avail. Some weird multi app error.

[italomaia]

There you go, @Anonyfox https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
The link above "almost works"

"import declarations may only appear at top level of a module"

[italomaia]

Based on the link above; https://github.com/italomaia/blog/tree/master/ux
Not sure why, but it works! Vue2 with TS2

[coderabsolute]

When the template is ready, then am also willing to switch ES6 to TS.

[lednhatkhanh]

Hello, any news on the template?

[gofreddo]

Also looking for any news on the template?

[ducksoupdev]

I have created a typescript template for Vue 2.0 - https://github.com/ducksoupdev/vue-webpack-typescript

Let me know what you think?

[rorisme]

@ducksoupdev I've been looking for something similar. It works pretty well, but I think there's place for improvements. Any plan on making it better?

[ducksoupdev]

Thanks. Yes definitely, I am new to Vue having mostly worked with Angular. I am learning lots and would like to improve the template. I would welcome any suggestions including PRs 😊

[mydnicq]

@rorisme What improvements do you have in mind?

[rorisme]

@ducksoupdev @tadejstanic I'm also a VueJS newbie. I'm using the template for a few days now. The reloading seems not accurate, and sometimes it reloaded twice. I've already made some changes and hope to be able to send suggestions and PRs in the days coming.

Btw, thanks to @ducksoupdev for sharing!

[ducksoupdev]

@rorisme Would be keen on any suggestions or PRs. This is early days and I would like to improve the template going forward. The compilation of both the Typescript and then the webpack bundle would explain the two reload issue. I am aware of it and possible fixes, just not got around to fixing it yet!

[rorisme]

@ducksoupdev I just made some adjustments to a fork of the template available here. Could you check it out and see if it's necessary to make a PR? I have tested scripts like npm run dev, npm run build and npm run serve.

[ducksoupdev]

@rorisme looks good, definitely worth a PR :)

[arcanewater]

Any plans to make this offical into generator?

[H3xx3n]

I'm using the @ducksoupdev template but would love to see an official one from vue

[italomaia]

Maybe, using flow, we could use most of what TS has that is amazing, without big changes: https://flowtype.org/en/docs/install/ Opinions?

[delaneyj]

@italomaia Typescript provides more than typing... async/await, class casing, etc

[italomaia]

@delaneyj do we need all TS has to offer? Actually, what do we need? I would be happy with type casting alone.

ps: async/await, can be provided by syntax-async-functions

[delaneyj]

@italomaia true, but in larger projects things like interfaces, case classes, generics, enums are so much more than what can be done currently in flow.

[e2tox]

I am the author of agent framework. I created one vue typescript template with fully functional backend written in 100% typescript.

vue init agentframework/webstack your-project

Source code: https://github.com/agentframework/webstack

[Toilal]

I wrote Toilal/vue-webpack-template, a fork of the official webpack template that works really well with TypeScript (even if you can use it with ES6).

Main purpose of the fork is to use standard files for components (.js/.ts, .html & .css) instead of .vue single file components while keeping the magic for components Hot Module Reload.

So it has exactly the same features from official template, but it's based on vue-hot-reload-loader and vue-templates-loader instead of vue-loader. Everything from upstream will be merge in the future.

You should really try it, feel free to open issues for feedbacks or questions.

[DmacMcgreg]

Does anyone know of any solutions with Typescript + single .vue file components + Hot Module Reload?

[Toilal]

@DmacMcgreg Use webpack official template and <script lang="ts">

[DmacMcgreg]

Do you have an example to use?
I'm having a heck of a time trying to get the loader integrated with Typescript and webpack.

[DmacMcgreg]

The solution should be able to work in the same way as this vue-loader example:

[rizqidjamaluddin]

I would also be interested in a proper typescript template.

Adding <script lang="ts"> doesn't work for as far as I tinkered with it. The official docs seem to imply it should work reasonably out of the box, plus vue-class-component for added compatibility, so I tried following similar steps as if I wanted Sass support.

I've tried:

• Using vue-class-component's tsconfig.json as a base (this one)
• Adding dependencies described in their example package.json
• In webpack base configs, added '.ts' to the resolve array, attach ts-loader for .ts files; basically merging in their example webpack config

And I still get a bucketload of errors, usually along the lines of

Module build failed: Error: Could not find file: '[...]/src/components/MyComponent.vue'
[...]
 @ ./src/components/MyComponent.vue 7:2-105

Where that file is just a basic

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  message: string = 'Hello!'
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

Not to mention a bunch of redeclaration errors and so forth.

I've thus far been unable to find any good examples of getting this to work using vue's built-in declarations (most articles I can find use vue-ts-loader). Since TS support is supposedly official now (given its position in the docs), I hope a proper template shows up soon.

[Coridyn]

@rizqidjamaluddin I had the same issue with a Could not find file: '[...]/src/Component.vue' error.

I was eventually able to get my project working with the following changes.

webpack.config.js

Make sure your entry is a TypeScript file and not JavaScript.

My webpack.config.js file looked like this when I was getting the error:

// webpack.config.js
module.exports = {
  entry: './src/app/main.js',   // <-- this causes problems
  output: {
    path: __dirname,
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          /*
          When entry is a .js file the options for this loader is ignored by vue-loader.
          
          `ts-loader` will be loaded without these settings and that's why TypeScript can't
          find the .vue files like we expect.
          */
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          esModule: true
        }
      }
    ]
  },
  devtool: 'source-map'
}

To fix it make sure your entry file is .ts:

// webpack.config.js
module.exports = {
  entry: './src/app/main.ts', // <-- entry must be a .ts file
  output: {
    path: __dirname,
    filename: 'build.js'
  },
  //...
}

references.d.ts and tsconfig.json

This fixed the Could not find file error but gave me these instead:

ERROR in /project-dir/src/app/ComponentContent.vue.ts
(15,31): error TS2307: Cannot find module './components/ComponentContent.vue'.

ERROR in ./main.ts
(1,8): error TS1192: Module '"project-dir/node_modules/vue/types/index"' has no default export.

ktsn's answer put me on the right track - make sure you have a declaration for the type emitted from .vue files

// references.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

---

2017-09-10 correction: previously the above snippet used export default typeof Vue. This was incorrect and should be export default Vue as shown in the TypeScript Vue Starter.

Using typeof ended up giving me errors like this when I moved to newer versions of TypeScript:

error TS2345: Argument of type '...' is not assignable to parameter of type 'AsyncComponent'.
  Object literal may only specify known properties, and 'name' does not exist in type 'AsyncComponent'.

---

Also make sure your TypeScript config has "allowSyntheticDefaultImports": true - without this TypeScript still complains about the vue modules missing default exports.

// tsconfig.json
{
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,	// <-- This is needed (based on settings from `vue-class-component` example tsconfig.json)
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    }
}

After that everything compiled and ran as expected.

I'd recommend check your module, moduleResolution and target settings too - having different values there caused me problems (unfortunately I can't remember what errors I was getting when I was playing with them, sorry).

(As a note to myself later, this was my solution when running into this issue: vuejs/vue-loader#109)

[trekze]

prograhammer. Not sure if it's helpful but I posted a fully working starter kit earlier in this thread, that does webpack, typescript within .vue files, vuex, vuerouter, etc.

https://github.com/hmexx/vue_typescript_starter_kit

[Jacknq]

its sad that takes ages to bring official ts template when comunity is already using it

[LinusBorg]

Well, the community is already using it, that's great. Someone already seems to maintain it, that's great. That's what open source is about, rifht?
I applaud the people investing their time, like we do ours.

I'm thankful that people stepped up to fill a void we lately weren't able to fill with our limited resources.

But "sad"? Sorry you feel that way, but I don't think we owe you anything.

Please don't waste your time complaining about stuff like this and do something valuable with it instead.

Thank you.

[Jacknq]

I have several repositories with typescript so as few guys here, i think it would be superb so that you guys select someone who is willing and able to maintain it and put it in cli. So that there is official support and anyone could see - hey those vuers they have bunch of most recent languages and templates prepared, the community is great, with great support. Creating something that everybody is happy about. Thank you that you keep us motivated.

[omidkrad]

Here's my suggestion. I think instead of creating a separate webpack-typescript template it's better to add typescript support to the existing webpack template and have the CLI tool to optionally include it. TypeScript can totally replace Babel, but they can also co-exist if that makes things easier for maintaining the template. If possible, externalize all parts of the build scripts that add TS support in a separate file. It only needs to allow .ts files in addition to .js files and allow lang="ts" in .vue files (use js by default). If anyone doesn't want to use TypeScript they simply write in JS (in config.json set allowJs: true). This I think gives us the best of both words and addresses needs of both sides. So if you agree, please make pull requests to vuejs-templates/webpack.

[Toilal]

I maintain a webpack template fork adding TypeScript and vue-class-component here, provided by some additional options to the official webpack template.

Having typescript as an option in the official webpack template is definitively the way to go, and would not require that much work. It's possible to use the metalsmith option in meta.js to rename all *.js files to *.ts when typescript option is choosen to avoid duplicating files only to add types.

[omidkrad]

Hi @Toilal, this is great, but that change is still too big for a merge. I'm not a VueJS moderator, but I think you can do few things if you want it to be considered as pull request:

• Make sure you are rebased on the latest from the original webpack template.
• The changes that come in PL should be exclusively for adding TS, so remove any improvements that are not directly related (even converting functions to lambdas or changing var to const, etc). If you want you can send them as separate PL.
• To keep the diffs minimal, I would only use .ts for the entry point which is main.ts and leave everything else as .js. Maybe can use .ts for other files in later PLs.
• If TS support can be externalized into a separate build file, that would help a lot in maintaining the template.

For now I think the important thing is to get the most minimal TS support accepted into the official webpack template, and we can make it better from there.

[Toilal]

For everybody who needs a TypeScript or a Library template, you should try again https://github.com/Toilal/vue-webpack-template. It's merged with current develop branch of webpack template, and now brings 3 new questions on top of it:

1. Project Type : App/Library. (When you choose Library, sources are splitted in 2 folders, src for the library and app for the demo/docs app.
2. Which language do you want to use? TypeScript (ts-loader + babel)/ES2015 (babel)
3. Use Class-Style Components (vue-class-component + vue-property-decorators)? Y/N

The template currently use dummy Single File Components with src attributes poiting to external html/css/ts/js files because TSLint doesn't support checking vue files, but I consider adding an option to really use Single File Components like in the official webpack template. For now, It's still possible to manually copy/paste the html/css/ts/js files into vue files.

For people who tested this fork months ago, It's now really closer to the official webpack template (it use vue-loader).

[AccessViolator]

if it's possible to get rid of babel when using typescript, that would be a "cleaner" implementation

[Toilal]

@AccessViolator I'm not sure it's a so good idea.

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

[Skwai]

Babel is great at providing polyfills and other features, so in many case it's better to make TypeScript target es6, and still use babel on TypeScript output to ensure older browser compatibility.

Couldn't you just target ES5 in tsconfig and import babel-polyfill into main.js if you use ES6 features and want to support older browsers?

Maybe I'm oversimplifying things, but I've setup a few of my own typescript projects and ended up ditching babel transpilation as I saw no need to keep it assuming all your code is typescript.

[Skwai]

I also feel that whatever implementation is merged should (probably) use the vue-property-decorator library and scaffold the hello world example using decorators and class syntax as a good boilerplate for the project to start with.

[dbettin]

@Skwai Do you know if this is easy to add after installing this template?

Could I just install vue-property-decorator and start using it?

[Skwai]

@dbettin Worked for me as far as I can remember. Also installed vuex-class

[ericop]

@yyx990803 is having a TypeScript Template out of scope for the foreseeable future of Vue, or is there something cool about to drop from Vue CLI that will be an official solution for this?

Tons of use were enthralled after your 2.5 update blog, but when it came time to build a project we realized the great comfort of having the cli (and a template) to guide us along the way.

[Jacknq]

Thank you to the team and integrating typescript template in vue cli v3!

[yyx990803]

@ericop it's already supported in 3.0.

[ericop]

@yyx990803 Awesome, thanks!

[ThePlastic]

I tried v 3.0 and it gives you a lot of usefull option (first of all you can choose typescript and css preprocessors). Does this eliminate the need to use webpack? And if not, when this template will be available on webpack??

[rigor789]

@ThePlastic 3.0 is built around webpack, but it is abstracted away to keep it simple for the end-user. But you can configure it if you need to.

[ThePlastic]

@rigor789 That's the definition of cool

[teslor]

How to setup a project using typescript template in vue-cli 3.0? I see there is cli-plugin-typescript but how to use it to init a new project?

[can-cc]

@teslor
vue create foo
and
select the "Manually select features"

[bromne]

Is there any way to change configuration corresponding to config/index.js in v2 (for example assetsSubDirectory) at a project created by v3?

[kronok]

@rigor789 It's abstracted away, but how would we customize the webpack configuration if we needed to?

[rigor789]

@kronok it's all written in the docs here: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 👍