{"id":20744221,"url":"https://github.com/021-projects/vite-plugin-vue-component-modifications","last_synced_at":"2025-07-07T08:10:10.007Z","repository":{"id":199313864,"uuid":"702588324","full_name":"021-projects/vite-plugin-vue-component-modifications","owner":"021-projects","description":"A vite plugin for flexible modifications of Vue components and other project files.","archived":false,"fork":false,"pushed_at":"2023-10-11T08:50:17.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-07T08:07:05.196Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/021-projects.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-09T15:44:58.000Z","updated_at":"2023-10-09T15:48:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"be1e18e6-3440-4bc6-8038-428d691cd7ac","html_url":"https://github.com/021-projects/vite-plugin-vue-component-modifications","commit_stats":null,"previous_names":["021-projects/vite-plugin-vue-component-modifications"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/021-projects/vite-plugin-vue-component-modifications","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/021-projects%2Fvite-plugin-vue-component-modifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/021-projects%2Fvite-plugin-vue-component-modifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/021-projects%2Fvite-plugin-vue-component-modifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/021-projects%2Fvite-plugin-vue-component-modifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/021-projects","download_url":"https://codeload.github.com/021-projects/vite-plugin-vue-component-modifications/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/021-projects%2Fvite-plugin-vue-component-modifications/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264040938,"owners_count":23548070,"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-11-17T07:14:43.881Z","updated_at":"2025-07-07T08:10:09.976Z","avatar_url":"https://github.com/021-projects.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-vue-component-modifications\n\n\u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-component-modifications\" target=\"_blank\"\u003e\u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/vite-plugin-vue-component-modifications?style=flat-square\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-component-modifications\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/vite-plugin-vue-component-modifications?style=flat-square\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-component-modifications\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vite-plugin-vue-component-modifications?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\n## Why?\n\nThe current Vue implementation does not allow building extensible CMS on it.\nThis plugin was created to solve this problem. \nIt parses modification files (`.vuem`) in the specified directories and modifies the components at compile time.\nWhich means that components can be extended with countless add-ons without running code in production to modify it.\n\nThe plugin also supports Hot Update mode.\n\n## Installation\n\n```bash\nnpm i vite-plugin-vue-component-modifications -D\n```\n\n## Usage\n\n```js\n// vite.config.js\nimport vue from '@vitejs/plugin-vue'\nimport vueComponentModifications from 'vite-plugin-vue-component-modifications'\nimport path from 'path'\n\nexport default {\n  plugins: [\n    // Must be placed before vue() plugin\n    vueComponentModifications({\n      dirs: [\n        path.resolve(__dirname, 'src/modifications'),\n      ],\n      files: [\n        // path.resolve(__dirname, 'src/modifications/HelloWorld.vuem'),\n      ],\n      skip: [\n        // Modificiations will not be applied to files with name config.js\n        // 'config.js',\n        \n        // Modificiations will not be applied to files in dangerous directory\n        // /\\/dangerous\\//,\n      ]\n    }),\n    vue(),\n  ],\n}\n```\n\n## Usage\n\n```vue\n\u003c!-- src/components/HelloWorld.vue --\u003e\n\u003cscript setup\u003e\n  defineProps({\n    msg: {\n      type: String,\n      required: true\n    }\n  })\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"greetings\"\u003e\n    \u003ch1 class=\"green\"\u003e{{ msg }}\u003c/h1\u003e\n    \u003ch3\u003e\n      You’ve successfully created a project with\n      \u003ca href=\"https://vitejs.dev/\" target=\"_blank\" rel=\"noopener\"\u003eVite\u003c/a\u003e +\n      \u003ca href=\"https://vuejs.org/\" target=\"_blank\" rel=\"noopener\"\u003eVue 3\u003c/a\u003e\n    \u003c/h3\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n  h1 {\n    font-weight: 500;\n    font-size: 2.6rem;\n    position: relative;\n    top: -10px;\n  }\n\n  h3 {\n    font-size: 1.2rem;\n  }\n\n  .greetings h1,\n  .greetings h3 {\n    text-align: center;\n  }\n\n  @media (min-width: 1024px) {\n    .greetings h1,\n    .greetings h3 {\n      text-align: left;\n    }\n  }\n\u003c/style\u003e\n```\n\n```vue\n\u003c!-- src/modifications/HelloWorld.vuem --\u003e\n\n\u003c!-- Add new link after Vue 3 --\u003e\n\u003ctemplate after=\"Vue 3\u003c\\/a\u003e\"\u003e\n  + \u003ca href=\"https://example.com\" target=\"_blank\" rel=\"noopener\"\u003eNew Link\u003c/a\u003e\n\u003c/template\u003e\n\n\u003c!-- Extend props to add customMsg prop --\u003e\n\u003cscript before=\"msg: {\"\u003e\n  customMsg: {\n    type: String,\n    default: ''\n  },\n\u003c/script\u003e\n\n\u003c!-- Add display of customMsg --\u003e\n\u003ctemplate find=\"{{ msg }}\" replace=\"$S\" trim\u003e\n  {{ customMsg ? customMsg : msg }}\n\u003c/template\u003e\n\n\u003c!-- Append new css to the style tag --\u003e\n\u003cstyle\u003e\n  h1 {\n    font-size: 3rem;\n  }\n\u003c/style\u003e\n```\n\nNow the `HelloWorld.vue` component will be compiled as follows:\n\n```vue\n\u003c!-- src/components/HelloWorld.vue with applied modifications --\u003e\n\u003cscript setup\u003e\n  defineProps({\n    customMsg: {\n      type: String,\n      default: ''\n    },\n    msg: {\n      type: String,\n      required: true\n    }\n  })\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"greetings\"\u003e\n    \u003ch1 class=\"green\"\u003e{{ customMsg ? customMsg : msg }}\u003c/h1\u003e\n    \u003ch3\u003e\n      You’ve successfully created a project with\n      \u003ca href=\"https://vitejs.dev/\" target=\"_blank\" rel=\"noopener\"\u003eVite\u003c/a\u003e +\n      \u003ca href=\"https://vuejs.org/\" target=\"_blank\" rel=\"noopener\"\u003eVue 3\u003c/a\u003e\n      + \u003ca href=\"https://example.com\" target=\"_blank\" rel=\"noopener\"\u003eNew Link\u003c/a\u003e\n    \u003c/h3\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n  h1 {\n    font-weight: 500;\n    font-size: 2.6rem;\n    position: relative;\n    top: -10px;\n  }\n\n  h3 {\n    font-size: 1.2rem;\n  }\n\n  .greetings h1,\n  .greetings h3 {\n    text-align: center;\n  }\n\n  @media (min-width: 1024px) {\n    .greetings h1,\n    .greetings h3 {\n      text-align: left;\n    }\n  }\n  h1 {\n    font-size: 3rem;\n  }\n\u003c/style\u003e\n```\n\n## Modification file syntax\n\n### File\nAllow to specify the pattern for the names of the files to which the modification will be applied.\u003cbr\u003e\nDefault: `[modification filename].vue`\n\nUnder the hood, the plugin creates a regular expression filter from this pattern. \nThat is, the modification will be applied to all files that match this regular expression (except for files with the `.vuem` extension).\n\n#### Examples\nWill be applied to files named `HelloWorld.vue`:\n```vue\n\u003cfile\u003eHelloWorld.vue\u003c/file\u003e\n```\n\nWill be applied to files named `HelloWorld.vue` in `components` directory:\n```vue\n\u003cfile\u003ecomponents/HelloWorld.vue\u003c/file\u003e\n```\n\nWill be applied to files named `HelloWorld.vue` or `GoodbyeWorld.vue`:\n```vue\n\u003cfile regex\u003e(Hello|Goodbye)World\\.vue\u003c/file\u003e\n```\n\n### Template, Script, Style\n\nUsing these tags we can specify the place where the modification will be applied.\u003cbr\u003e\nThese tags have accept attributes:\n\n`before` – the tag content will be applied before the content matching the specified regular expression.\u003cbr\u003e\n`after` – the tag content will be applied after the content matching the specified regular expression.\u003cbr\u003e\n`find` – the tag content will be applied instead of the content matching the specified regular expression.\u003cbr\u003e\n`replace` – controls how the matching content will be replaced. The `$S` keyword will be replaced with the tag contents.\u003cbr\u003e\n`trim` – if this attribute is present, the tag content will be trimmed before replace.\n\nIf the `after`, `before` and `find` attributes are not specified, the tag content will be appended to the end of the corresponding component tags.\n\nLook at the usage example above to see how these tags work.\n\n### Extension of regular JS/TS files\n\n```js\n\u003c!-- src/main.js --\u003e\nimport './assets/main.css'\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n\u003c!-- src/modifications/mainjs.vuem --\u003e\n\u003cfile\u003esrc/main.js\u003c/file\u003e\n\n\u003cscript after=\"mount\\('\\#app'\\)\" trim\u003e\n  .use(SomePlugin);\n  \n  console.log('Hello from modification!');\n\u003c/script\u003e\n```\n\nResult:\n```js\n\u003c!-- src/main.js --\u003e\nimport './assets/main.css'\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app').use(SomePlugin);\n\nconsole.log('Hello from modification!');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F021-projects%2Fvite-plugin-vue-component-modifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F021-projects%2Fvite-plugin-vue-component-modifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F021-projects%2Fvite-plugin-vue-component-modifications/lists"}