{"id":13567850,"url":"https://github.com/egoist/vue-compile","last_synced_at":"2025-04-09T12:07:17.137Z","repository":{"id":32418216,"uuid":"132436765","full_name":"egoist/vue-compile","owner":"egoist","description":"Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:06:59.000Z","size":1265,"stargazers_count":160,"open_issues_count":33,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T10:13:40.921Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-07T09:18:14.000Z","updated_at":"2025-01-14T18:49:05.000Z","dependencies_parsed_at":"2023-01-14T21:15:18.116Z","dependency_job_id":null,"html_url":"https://github.com/egoist/vue-compile","commit_stats":null,"previous_names":["egoist/sfc"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-compile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-compile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-compile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-compile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/vue-compile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036067,"owners_count":21037092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:02:46.167Z","updated_at":"2025-04-09T12:07:17.114Z","avatar_url":"https://github.com/egoist.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\n# vue-compile\n\nCompile the blocks in Vue single-file components to JS/CSS from Babel/Sass/Stylus.\n\n## Why This Approach\n\nYou may want to publish `.vue` files instead of transformed `.js` files on npm because the `.vue` file is preferred in some scenarioes, e.g. `vue-server-renderer` can inline critical CSS from `\u003cstyle\u003e` blocks.\n\nThis tool will transform each block in the `.vue` file to their standard conterparts like `sass` -\u003e `css` so your users don't have to install additional libraries to compile it. \n\nIt also provides a `--preserve-ts-block` flag if you don't want to transpile TypeScript, because tools like Vite supports TypeScript out of the box. In this way you don't need to generate `.d.ts` for your Vue components either, thanks to [Volar](https://github.com/johnsoncodehk/volar).\n\n\n## Install\n\n```bash\nyarn global add vue-compile\n# or\nnpm i -g vue-compile\n```\n\n## Usage\n\n```bash\n# normalize a .vue file\nvue-compile example.vue -o output.vue\n# normalize a directory\n# non .vue files will be simply copied to output directory\nvue-compile src -o lib\n```\n\n__Then you can publish normalized `.vue` files to npm registry without compiling them to `.js` files.__\n\nSupported transforms (via `lang` attribute):\n\n- `\u003ctemplate\u003e` tag:\n  - `html` (default)\n- `\u003cscript\u003e` tag: \n  - `babel` (default): use our default [babel preset](./lib/babel/preset.js) or your own `.babelrc`\n  - `ts` `typescript`: use our default [babel preset](./lib/babel/preset.js) + `@babel/preset-typescript`, you can use `--preserve-ts-block` flag to preserve types, i.e. disable typescript transformation\n- `\u003cstyle\u003e` tag: \n  - `postcss` (default): use your own `postcss.config.js`\n  - `stylus` `sass` `scss`\n- Custom blocks: They are not touched.\n\nGotchas:\n\n- We only handle `src` attribute for `\u003cstyle\u003e` blocks, we simply replace the extension with `.css` and remove the `lang` attribute.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cbr\u003e\n\nIn:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"foo\"\u003e\n    {{ count }}\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      count: 0\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\" src=\"./foo.scss\"\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\n@import './colors.styl'\n\n.foo \n  color: $color\n\u003c/style\u003e\n```\n\nOut:\n\n```vue\n\u003ctemplate\u003e  \n  \u003cdiv class=\"foo\"\u003e\n    {{ count }}\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: function data() {\n    return {\n      count: 0\n    };\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle src=\"./foo.css\"\u003e\n\n\u003cstyle scoped\u003e\n.foo {\n  color: #f00;\n}\n\u003c/style\u003e\n```\n\u003c/details\u003e\n\n### Compile Standalone CSS Files\n\nCSS files like `.css` `.scss` `.sass` `.styl` will be compiled to output directory with `.css` extension, all relevant `import` statements in `.js` `.ts` or `\u003cscript\u003e` blocks will be changed to use `.css` extension as well.\n\nYou can exclude them using the `--exclude \"**/*.{css,scss,sass,styl}\"` flag.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n\n## Author\n\n**vue-compile** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-compile/contributors)).\n\n\u003e [github.com/egoist](https://github.com/egoist) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-compile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fvue-compile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-compile/lists"}