I was wondering if it is possible to use curly braces for a value in the style segment in vue.js?
For example
.container {
background: url({{ image-url }};
color: {{ color-1 }}
}
There is an experimental feature to bind CSS variables provided from the script. Try this:
<template>
<div class="text">Lorem ipsum</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup() {
const color = ref('red');
const image = ref('url(https://picsum.photos/200/300)');
return {color}
}
};
</script>
<style vars="{ color, image }">
.text {
color: var(--color);
background-image: var(--image);
}
</style>
Or try new v-bind() injection