{"id":15810,"library":"rollup-plugin-ts-vue","title":"Rollup Plugin for TypeScript Vue 2 Components","description":"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.","status":"abandoned","version":"0.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/JTravis76/rollup-plugin-ts-vue","tags":["javascript","vue","typescript","rollup","scss"],"install":[{"cmd":"npm install rollup-plugin-ts-vue","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-ts-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-ts-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a plugin for Rollup and requires Rollup to function. It is an implicit peer dependency.","package":"rollup","optional":false},{"reason":"Commonly used alongside this plugin in Rollup configurations to resolve modules from `node_modules`.","package":"@rollup/plugin-node-resolve","optional":true}],"imports":[{"note":"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.","wrong":"const vue = require('rollup-plugin-ts-vue');","symbol":"vue","correct":"import vue from 'rollup-plugin-ts-vue';"}],"quickstart":{"code":"import resolve from '@rollup/plugin-node-resolve';\nimport vue from 'rollup-plugin-ts-vue';\n\nexport default {\n    input: './src/main.ts',\n    output: {\n        name: 'app',\n        format: 'iife',\n        file: './dist/js/app.js',\n        globals: {\n            'vue': 'Vue',\n            'vue-router': 'VueRouter',\n            'vuex': 'Vuex',\n            'vue-property-decorator': 'VueClassComponent',\n            'vue-class-component': 'VueClassComponent',\n            'axios': 'axios'\n        },\n        sourcemap: true,\n        sourcemapFile: './dist/js/app.js.map'\n    },\n    plugins: [\n        resolve(),\n        vue(null, { // null defaults to tsconfig.json\n            output: './dist/css/site.css',\n            includePaths: ['src/scss']\n        })\n    ],\n    external: [\n        'vue',\n        'vue-router',\n        'vuex',\n        'vue-class-component',\n        'vue-property-decorator',\n        'axios'\n    ]\n}","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"0.6.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.3.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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/*\" ] }`.","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.","error":"Rollup will assuming its an external dependencies."},{"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.","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.","error":"[!] (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."}],"ecosystem":"npm"}