vue css code example

Example 1: vue import css

// To import global CSS, simply import the stylesheet in main.js or App.vue, 
// where it is easy to reference all global styles in one main file 
// (or create a styles-import.js file and import that file in your main.js file).

// main.js
import '~/assets/styles.css';

// To import css scoped to a component, we can't just @import within a scoped style element,
// as they will leak out.
// Instead, we need to dedicate an entire scoped style element to importing that file.

// Component.vue
// Do this:
<style scoped src="~/assets/styles.css"><style> // This will import the CSS scoped to this component only
// Not that:
<style scoped lang="css">
  @import "~/assets/styles.css"; // This will import the CSS globally
</style>

Example 2: vue toggle class

<template>
  	<div>
      <div
        class="staticClass"
        v-bind:class="{ active: isActive, 'text-danger': hasError }"
      ></div>
      <!-- OR -->
      <div
           v-bind:class="[isActive ? activeClass : '', errorClass]"
      ></div>
	</div>
</template>

<script>
  export default {
  	data() {
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'text-danger',
    }
  }
</script>

Example 3: conditional class vue

<template>
  <span
    class="description"
    :class="darkMode ? 'dark-theme' : 'light-theme'"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>