Rollup Plugin for TypeScript Vue 2 Components

0.6.0 · abandoned · verified Tue Apr 21

The `rollup-plugin-ts-vue` package, currently at version 0.6.0 (last updated in August 2021), is a Rollup plugin designed to bundle Vue 2 Single-File Components (SFCs) that are written in TypeScript and utilize SCSS for styling. It distinguishes itself by integrating directly with TypeScript's API, aiming to simplify the build process by reducing reliance on external tools such as Babel or Webpack. A key feature is its ability to handle `tsconfig.json` path aliases (e.g., `@/components`), which Rollup typically doesn't resolve by default. The plugin's release cadence is not regular, with its most recent update being driven by security advisories rather than active feature development. It targets a niche of developers who prefer a minimalist Rollup-centric toolchain for their Vue 2 projects with strong TypeScript typing, though it only offers partial support for scoped CSS.

Common errors

```
Rollup will assuming its an external dependencies.
```
cause When using TypeScript path aliases (e.g., `import MyMod from "@/components/my-module"`) configured in `tsconfig.json`, Rollup doesn't natively understand how to resolve these paths.

fix Ensure `rollup-plugin-ts-vue` is correctly configured in your Rollup plugins array. The plugin is designed to translate and resolve these `tsconfig.json` paths before passing them to Rollup. Your `tsconfig.json` `baseUrl` and `paths` should be correctly set, e.g., `"baseUrl": ".", "paths": { "@/*": [ "src/*" ] }`.
```
[!] (plugin typescript) Error: Could not load .../MainView.vue?vue&type=script&lang.ts (imported by MainView.vue): Debug Failure. False expression: Expected fileName to be present in command line.
```
cause This specific error (though more common with `@rollup/plugin-typescript`) indicates a deeper issue where the TypeScript compiler, when invoked by the Rollup plugin, struggles to process Vue SFC script blocks, especially when they are extracted or transformed.

fix While `rollup-plugin-ts-vue` aims to handle this, if encountered, double-check your `tsconfig.json` for any conflicting `include` or `exclude` patterns, and ensure your Rollup configuration's order of plugins is correct. In some cases, `rollup-plugin-typescript2` has been noted as a more robust alternative for complex TypeScript scenarios.

Warnings

breaking Version 0.6.0 was released due to a GitHub security advisory patching updated NPM packages. The README explicitly states, "!! Use at your own risk !!", indicating potential instability or unresolved issues.
Fix: Thoroughly review the package's dependencies and consider auditing your project for vulnerabilities. Migrate to a more actively maintained solution if security is paramount.
gotcha The plugin has only partial and beta support for `scoped` styles within Vue Single-File Components. This feature may not work as expected or might be unstable.
Fix: Avoid relying heavily on `scoped` styles or implement alternative CSS scoping strategies (e.g., CSS Modules, BEM methodology, manual class prefixing) if precise isolation is required.
gotcha This package appears to be effectively abandoned. The last commit and release (v0.6.0) were in August 2021. It primarily targets Vue 2 and is unlikely to receive updates for Vue 3 compatibility or newer Rollup versions, potentially leading to compatibility issues or security risks over time.
Fix: For new projects or projects requiring Vue 3, consider `rollup-plugin-vue` (the official plugin) or solutions based on Vite, which uses Rollup internally, as they offer active maintenance and Vue 3 support.

Install

npm install rollup-plugin-ts-vue npm
yarn add rollup-plugin-ts-vue yarn
pnpm add rollup-plugin-ts-vue pnpm

Imports

vue
wrong:
```
const vue = require('rollup-plugin-ts-vue');
```
correct:
```
import vue from 'rollup-plugin-ts-vue';
```
The plugin is primarily distributed as an ES module. Direct `require()` statements might lead to errors in some environments, especially without a CommonJS plugin for Rollup. The quickstart also shows an anti-pattern: `import vue from './node_modules/rollup-plugin-ts-vue/dist/rollup-plugin-ts-vue.es';` which should be avoided.

Quickstart

This Rollup configuration demonstrates how to bundle a Vue 2 application with TypeScript and SCSS using `rollup-plugin-ts-vue`, resolving node modules and outputting CSS separately.

import resolve from '@rollup/plugin-node-resolve';
import vue from 'rollup-plugin-ts-vue';

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(),
        vue(null, { // null defaults to tsconfig.json
            output: './dist/css/site.css',
            includePaths: ['src/scss']
        })
    ],
    external: [
        'vue',
        'vue-router',
        'vuex',
        'vue-class-component',
        'vue-property-decorator',
        'axios'
    ]
}

view raw JSON →