I'm learning Vue js. I created a Vue JS app with cdn link and I want to know, how to add element style to it.
I can write template as template: <div>Vue js 3</div> but can style be written like it?
Like -
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
},
template : `<button @click="increment">count is: {{ count }}</button>`,
//can style be written like it?
style : {
button {
background : red;
}
}
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}```
I think this should work for you.
<style>
@import './yourStyles.css';
</style>
If styles is particular to this component button, then you can use scoped style.
<style scoped>
button {
background : red;
}
</style>
If you want to apply common style for all the buttons in an application then you can create a common style file and then import wherever you want to access.
<style>
@import './button.css';
</style>
Demo :
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
}
}
})button {
background : red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="increment">count is: {{ count }}</button>
</div>In your index file add a main js with script type module
In your component e.g. counter.js add
import sheet from './styles.css' assert { type: 'css' };