https://github.com/021-projects/vite-plugin-vue-component-modifications
A vite plugin for flexible modifications of Vue components and other project files.
https://github.com/021-projects/vite-plugin-vue-component-modifications
Last synced: 12 months ago
JSON representation
A vite plugin for flexible modifications of Vue components and other project files.
- Host: GitHub
- URL: https://github.com/021-projects/vite-plugin-vue-component-modifications
- Owner: 021-projects
- License: mit
- Created: 2023-10-09T15:44:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-11T08:50:17.000Z (over 2 years ago)
- Last Synced: 2025-07-07T08:07:05.196Z (12 months ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-vue-component-modifications
## Why?
The current Vue implementation does not allow building extensible CMS on it.
This plugin was created to solve this problem.
It parses modification files (`.vuem`) in the specified directories and modifies the components at compile time.
Which means that components can be extended with countless add-ons without running code in production to modify it.
The plugin also supports Hot Update mode.
## Installation
```bash
npm i vite-plugin-vue-component-modifications -D
```
## Usage
```js
// vite.config.js
import vue from '@vitejs/plugin-vue'
import vueComponentModifications from 'vite-plugin-vue-component-modifications'
import path from 'path'
export default {
plugins: [
// Must be placed before vue() plugin
vueComponentModifications({
dirs: [
path.resolve(__dirname, 'src/modifications'),
],
files: [
// path.resolve(__dirname, 'src/modifications/HelloWorld.vuem'),
],
skip: [
// Modificiations will not be applied to files with name config.js
// 'config.js',
// Modificiations will not be applied to files in dangerous directory
// /\/dangerous\//,
]
}),
vue(),
],
}
```
## Usage
```vue
defineProps({
msg: {
type: String,
required: true
}
})
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
```
```vue
+ New Link
customMsg: {
type: String,
default: ''
},
{{ customMsg ? customMsg : msg }}
h1 {
font-size: 3rem;
}
```
Now the `HelloWorld.vue` component will be compiled as follows:
```vue
defineProps({
customMsg: {
type: String,
default: ''
},
msg: {
type: String,
required: true
}
})
{{ customMsg ? customMsg : msg }}
You’ve successfully created a project with
Vite +
Vue 3
+ New Link
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
h1 {
font-size: 3rem;
}
```
## Modification file syntax
### File
Allow to specify the pattern for the names of the files to which the modification will be applied.
Default: `[modification filename].vue`
Under the hood, the plugin creates a regular expression filter from this pattern.
That is, the modification will be applied to all files that match this regular expression (except for files with the `.vuem` extension).
#### Examples
Will be applied to files named `HelloWorld.vue`:
```vue
HelloWorld.vue
```
Will be applied to files named `HelloWorld.vue` in `components` directory:
```vue
components/HelloWorld.vue
```
Will be applied to files named `HelloWorld.vue` or `GoodbyeWorld.vue`:
```vue
(Hello|Goodbye)World\.vue
```
### Template, Script, Style
Using these tags we can specify the place where the modification will be applied.
These tags have accept attributes:
`before` – the tag content will be applied before the content matching the specified regular expression.
`after` – the tag content will be applied after the content matching the specified regular expression.
`find` – the tag content will be applied instead of the content matching the specified regular expression.
`replace` – controls how the matching content will be replaced. The `$S` keyword will be replaced with the tag contents.
`trim` – if this attribute is present, the tag content will be trimmed before replace.
If the `after`, `before` and `find` attributes are not specified, the tag content will be appended to the end of the corresponding component tags.
Look at the usage example above to see how these tags work.
### Extension of regular JS/TS files
```js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
```vue
src/main.js
.use(SomePlugin);
console.log('Hello from modification!');
```
Result:
```js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app').use(SomePlugin);
console.log('Hello from modification!');
```