gem-hunter

Rollup-Plugin-Ts-Vue

Why

Rollup Config

import resolve from "./node_modules/@rollup/plugin-node-resolve/dist/index.es";
import vue from "./node_modules/rollup-plugin-ts-vue/dist/rollup-plugin-ts-vue.es";

export default {
    input: "./src/main.ts",
    output: {
        name: "app",
        format: "iife",
        file: "./dist/js/app.js",
        globals: {
            "vue": "Vue",
            "vue-router": "VueRouter",
            "vuex": "Vuex",
            "vue-property-decorator": "VueClassComponent",
            "vue-class-component": "VueClassComponent"
            "axios": "axios"
        },
        sourcemap: true,
        sourcemapFile: "./dist/js/app.js.map"
    },
    plugins: [
        resolve(),
        // null == defaults to tsconfig.json
        vue(null, {
            output: "./dist/css/site.css",
            includePaths: ["src/scss"]
        })
    ],
    external: [
        "vue",
        "vue-router",
        "vuex",
        "vue-class-component",
        "axios"
    ]
}

Examples of Strong-Typed Vue Components

<template>
  <div>{{msg}}</div>
</template>

<script lang="ts">
  import Vue, { ComponentOptions } from "vue";

  export default {
    data() {
      return {
        msg: "Hello World",
      };
    },
  } as ComponentOptions<any>;
</script>

<style lang="scss"></style>

<template>
  <div>{{msg}}</div>
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    data() {
      return {
        msg: "Hello World",
      };
    },
    created() {
      let vm = this as VueComp;
      vm.msg = "Hello World Too!!";
    },
  });

  interface VueComp extends Vue {
    msg: string;
  }
</script>

<style lang="scss">
  $myColor = blue;

  div {
      color: $myColor;
  }
</style>

<template>
  <div>{{msg}}</div>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  @Component({
      name: "component-template"
  })
  export default class ComponentTemplate extends Vue {
      msg: string = "Hello World";

      created() {
          this.msg = "Hello World Too!!";
          console.log(Created: life-cycle hook);
      }
  }
</script>

<style lang="scss">
  div {
    color: blue;

    a {
      color: green;
    }
  }
</style>

Typescript Path Translation

{
    ...

    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    }

    ...
}

Change Log