Mastering Different Ways to Add Global CSS Styles in Vue 3

You can use a variety of techniques to add global CSS styles to your Vue 3 components. Among all other JavaScript frameworks, VueJS is the most flexible in terms of applying styles.

While developing an application, often we need to write some CSS and want to use them globally, across our entire application. Vue 3 provides a few options for that.

Use External CSS Files to Add Global Styles

To create a global CSS file, you can simply create a new file with a .css extension, and add your CSS styles to it. You can also use a preprocessor like Sass or Less to write your styles more efficiently.

Once you've created your global CSS file, you'll need to import it into your Vue 3 app. The easiest way to do this is to import it into your main.js file, which is the entry point for your application.

          // main.js file

import { createApp } from 'vue'
import App from './App.vue'

import './assets/global.css'

createApp(App).mount('#app')
        

In this example, we assume that the global.css file is present in a directory called "assets" at the root of your Vue 3 app. Now you can import this global CSS file into the main.js file using import keyword.

Once you've imported your global CSS file, you can use your defined styles throughout your application.

It's easy to set up, allows you to organize your styles in one central location, and is a great way to maintain consistency throughout your app.

For example, if you want to add a global font style to your app, you can simply define it in your global CSS file, and it will be available to all components in your app.

Also Read: How to Use Vue 3 CSS Variables With v-bind: Reactive Styles

Using Style Tag in the Root Component

You can use the <style> tag without the scoped attribute in order to define global CSS styles. You can add this <style> tag to any of your Vue components. But the good practice is to use it once in the root component.

The root component is the top-level component in your Vue 3 app, and it's the first component that gets loaded when your app starts. By defining global styles in the root component, you can keep your styles organized and maintainable.

In our example, the App.vue component is our root component. Because we imported and used it in the main.js file while creating our Vue application.

          // App.vue component

<template>
    <header>
        <h1>Web Mound</h1>
    </header>
</template>

<style>
h1 {
    font-size: 2rem;
    color: #0d78b1;
}
</style>
        

In this example, We're using the style tag without the scoped attribute to define the styling for the h1 tag. By doing so, we have added styles for <h1> tag globally.

Now whenever you use the <h1> tag in any component, it will get this style automatically. Therefore, you don't have to write the same CSS properties again and again for every component.

Also Read: Style Child Components & Dynamic HTML Using Vue 3 Deep Selector

Apply Global CSS Using :global Pseudo-class

You use the scoped attribute on a <style> tag to scope the styles within the Vue component. In this way, the styles defined in that component's style tag will only apply to the elements in that component's template.

But sometimes you might want to define some styles that apply to the entire application. You can use the :global pseudo-class inside the scoped <style scoped> tag to define CSS Styles globally.

          // Categories.vue component

<template>
    <section>
        <h1>Categories</h1>
        <div>
            <p class="red">HTML</p>
            <p class="red">CSS</p>
            <p class="red">JavaScript</p>
        </div>
    </section>
</template>

<style scoped>
:global(.red) {
    color: #ff0000;
}
</style>
        

I have a Categories.vue component where I am using the scoped <style scoped> tag. Whatever CSS properties I define here will only apply to the elements in this component.

But within this scoped style tag, I can target any class or element to apply some global styles with the :global pseudo-class. For example, here I am targeting all elements with the red class by using .red inside the :global pseudo-class.

If I use this CSS class in other components, the styles associated with it will be applied to those components. Even though I am defining the .red class in the Categories.vue component.

Also Read: How to Style Slot Elements in Vue 3 Using Slotted Selectors