Registry / web-framework / rollup-plugin-ts-vue

rollup-plugin-ts-vue

library0.6.0jsnpmunverified

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.

web-framework serialization

npm install rollup-plugin-ts-vue

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-TS-V

rollup-plugin-ts-vue

web-frameworkjavascriptv0.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vue

✓ import vue from 'rollup-plugin-ts-vue';

✗ const vue = require('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.

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' ] }

Debug

Known issues

breakingVersion 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.

affects: 0.6.0

gotchaThe 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.

affects: >=0.3.0

gotchaThis 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.

affects: >=0.6.0

Errors

Common errors & fixes

Rollup will assuming its an external dependencies.

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.

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.

Upgrade

Version history

0.6.0latest on npm

Audit

Dependencies

rolluprequiredThis package is a plugin for Rollup and requires Rollup to function. It is an implicit peer dependency.

@rollup/plugin-node-resolveoptionalCommonly used alongside this plugin in Rollup configurations to resolve modules from `node_modules`.

Agent activity

22 hits · last 30 days

node

Resources

githubhttps://github.com/JTravis76/rollup-plugin-ts-vue ↗

packagehttps://www.npmjs.com/package/rollup-plugin-ts-vue ↗