As is stated in this answer, you can't define separate CSS in a Vue component using something like css like you can define HTML using template.
That being said, there are a few ways you can define CSS for specific components/elements:
Scoped CSS
You can define a style to be scoped to a component:
App.vue
<template>
<div id="app">
<RedComponent/>
<NotRedComponent/>
</div>
</template>
<script>
import RedComponent from "./components/RedComponent";
import NotRedComponent from "./components/NotRedComponent";
export default {
components: {
RedComponent,
NotRedComponent
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
RedComponent.vue
<script>
export default {
template: "<div>I am red</div>"
};
</script>
<style scoped>
div {
color: red;
}
</style>
NotRedComponent.vue
<script>
export default {
template: "<div>I am not red</div>"
};
</script>
See this live here
CSS Classes and IDs
You can give elements classes and IDs in order to select them with CSS, and just have a separate CSS file. Note: this is not unique to Vue.
App.vue
<script>
export default {
name: "App",
template: '<div><p class="red">I am red</p><p>I am not red</p></div>'
};
</script>
index.css
.red {
color: red;
}
See this live here
You can reference this index.css file from anywhere (within reason) - for example, in my live demo it is referenced from within index.html itself (something like <link rel="stylesheet" type="text/css" href="index.css" /> within the <head> tag will do).
Inline styles
For this, using backticks (`) rather than quotes will make your life easier. Another benefit of using backticks is the fact that you can span your template over multiple lines.
App.vue
<script>
export default {
name: "App",
template: `<div>
<p style="color: red">I am red</p>
<p>I am not red</p>
</div>`
};
</script>
See this live here
Personally, I've never found a use-case where scoped CSS won't do the trick, even with vue-router, but those are some alternative options if you can't use it for whatever reason.
