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: https://github.com/vuejs/vue-loader/issues/109)

[luxueyan]

How to use the tslint in a .vue file! The eslint can use the 'eslint-plugin-html' to ignore outside script tag code. But the tslint has no plugins.

[kuncevic]

Just installed vue-cli and created the project with webpack template but wasn't giving an option to choose typescript. Sounds like typescript is not kind of mainstream approach to go with a vue.

Currently looking in to this one https://github.com/ducksoupdev/vue-webpack-typescript but it would be nice if default template has such an option to choose typscript

Any plans for adding such an option to make vue templates typescript friendly?

[johnlindquist]

https://github.com/johnlindquist/vue-typescript-simple

vue init johnlindquist/vue-typescript-simple

^Feel free to try out my TS template Includes:

• vuex
• vue-class-component
• vue-typescript-decorators

[luxueyan]

I have create startkit.This support to create a component use .vue file. Otherwise you can create a component with seperated files。such as .postcss/.scss/.css, .ts, .pug/.html https://github.com/luxueyan/vue-ts-startkit

[zigomir]

And another one :) https://github.com/zigomir/typed-vue pretty simple, but has type checking inside .vue files. Works especially well with vscode.

[lbssousa]

Current Vue.js default webpack templates support some CSS preloaders almost out-of-box (you still need to npm install --save-dev <whatever> <whatever>-loader, but the relevant entries in webpack.base.conf.js are already there).

I wonder if the same could be done for TypeScript, so one can start writing TypeScript-based components with no extra changes in Webpack config (even letting TypeScript-based components coexist with Babel-based ones).

I'm quite close to achieve this objective in my experiments with a PWA template, but I still need to rename the entry point main.js to main.ts (and changing it in webpack.base.conf.js, so that it's loaded by ts-loader). Is there a way to configure Webpack so that my entry point could be loaded by babel-loader while individual TypeScript-based .vue files are loaded by ts-loader?

[tezine]

So, when a typescript template will be available in the CLI?

[bmass02]

I have made a PR for adding a TS option to the current webpack template. Hopefully it will get the ball rolling to officially support a TS option/template.

[suchanlee]

It's been a while since the last comment, but Microsoft provides this: https://github.com/Microsoft/TypeScript-Vue-Starter

[igogrek]

The problem with the oficial Microsoft template is that it's quite basic compared to the webpack template for example. When this https://github.com/vuejs/vue/pull/5887 will be finally merged (2 months waiting already..) I will be able to merge the option into webpack template https://github.com/vuejs-templates/webpack/pull/797

[damienbeaufils]

Work started on vuejs/vue#5887 now continue in vuejs/vue#6391

[nahuel]

it will be nice to use http://fuse-box.org in the vue typescript tempate, it has first-class typescript support, is faster than webpack, simpler, and has a saner hot reload system. In contrast, Facebook's create-react-app and Microsoft TypesScript-React-Starter have NO support for hot reloading yet, because in webpack is too patchy.

[pendar747]

@nahuel Fusebox itself has a seed project but typescript doesn't work that well inside single file components. https://github.com/fuse-box/fuse-box-vue-seed

[dingyiming]

vue 2.5.2 + ts

[ericop]

@pendar747 it should now https://vuejs.org/v2/guide/typescript.html#Development-Tooling

[Fachher]

@yyx990803 Is there a release date for the official typescript vue template?

[ericop]

Just to be clear, @Fachher you mean on https://github.com/vuejs-templates for the CLI ?

[Fachher]

@ericop Exactly

[tahq69]

We also plan to provide an option to scaffold a ready-to-go Vue + TypeScript project in vue-cli in the near future.

Is there a more strict plan for this? I am planning new project and would like to use new template, but if it take months to wait for it, I can use existing one with minor changes for TS.

[trekze]

Even though I'm new to VueJS and front-end development in general. I've created a starter kit that may help people until something official comes along:

https://github.com/hmexx/vue_typescript_starter_kit

It seems to work great. Strong typing works everywhere including in the single-file components and Vuex store. It includes the usual (Webpack hot-reload dev/build, vuex, vue-router, class decorators for readability). I use VSCode and the Vetur extension, but it might work without it. If there is something horribly wrong with it, let me know and I can take it down or modify it.

Otherwise... Enjoy

[fdeitelhoff]

Can't wait for the official typescript template, too. :)

Want to start a new project from scratch with typescript and this would be the perfect opportunity.