san-loader-plus
San component loader for Webpack with mixin, global component and global filter supports.
It allows you to write your components in this format:
globalComponent.san
<template>
<div class="global-component">Hello global component</div>
</template>
<script>
export default {
}
</script>
anotherGlobalComponent.san
<template>
<div class="another-global-component">Hello another global component</div>
</template>
<script>
export default {
}
</script>
globalFilter.js
export const toUpperCase = function(value) {
return value.toUpperCase()
}
export const toLowerCase = function(value) {
return value.toLowerCase()
}
globalMixin.js
export default {
attached() {
console.log('global mixin attached')
}
}
anotherGlobalMixin.js
export default {
attached() {
console.log('another global mixin attached')
}
}
mixin.js
import globalComponent from './globalComponent.san'
export default {
// register component with mixin
components: {
'global-component': globalComponent
},
attached() {
console.log('mixin attached')
}
}
main.js
import { mixin, component, filter } from 'san-loader-plus/lib/helper'
import anotherGlobalComponent from './anotherGlobalComponent.san'
import globalMixin from './globalMixin'
import anotherGlobalMixin from './anotherGlobalMixin'
import { toUpperCase, toLowerCase } from './globalFilter'
// register global component
component('another-global-component', anotherGlobalComponent)
filter('upper', toUpperCase)
filter('lower', toLowerCase)
// register global mixin
mixin(globalMixin)
mixin(anotherGlobalMixin)
page.san
<template>
<div class="hello">
hello {{ msg | upper }},
hello {{ msg | lower }}
<global-component />
<another-global-component />
</div>
</template>
<script>
import mixin from './mixin'
export default {
mixins: [mixin],
data: {
msg: 'World'
}
}
</script>
<style>
.hello {
color: blue;
}
</style>
Usage
{
module: {
loaders: [
{
test: /\.san$/,
loader: 'san-loader-plus'
}
]
}
}