row.vue
<script>
export default {
name: "Row",
data() {
return {
app: [
"row",
"row-test",
"flex-center"
]
}
},
template: `
<div :class="$module[app]"><slot></slot></div>
`
}
</script>
row.scss
.row {
color: red;
}
.row-test {
color: green;
}
.flex-center {
align-items: center;
justify-content: center;
}
App.vue
<template>
<div id="app">
<row app="row-test flex-center">my row</row>
<router-view />
</div>
</template>
vue.config.js
css: {
requireModuleExtension: true,
loaderOptions: {
css: {
modules: {
localIdentName: 'hex-[HASH:HEX:3]'
}
}
},
modules: true
}
I aim to set attributes using the app attribute, treating them like regular classes. These values will be stored in an array inside row.vue and applied as CSS properties using CSS modules (a randomly generated class is assigned).
The issue I'm facing
<div app="row-test flex-center">my row</div>
Desired outcome
<div class="hex-g3D hex-f41">my row</div>