javascript / beginner
Snippet
Using Script Variables in CSS
Vue allows you to bind CSS values directly to reactive variables in your script section using the v-bind() function inside CSS.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script setup>const themeColor = 'blue';</script><style scoped>.text {color: v-bind(themeColor);}</style>
vue
Breakdown
1
const themeColor = 'blue'
Defining a standard variable in the script setup.
2
v-bind(themeColor)
Binding the CSS property value to the script variable.