How to install Jss in vue3

Style your vue.JS components with jSS ( a modern styling toolkit)

Styling in Vue

    Vue can be styled with simple CSS, sass, less, and even jss. In order to use jss in vue. you need to add the following dependencies to your project.

NOTE: This tutorial assumes you have a basic knowledge of vue and how to style vue components using different styling techniques

• npm install vue-jss
• npm install jss
• npm install jss-preset-default

After installing the dependencies. you should be able to use jss in your Vue applications.

let's see the working example and how to use jss. we will be using typescript extension for files but it can also be used with javascript files.

Example

let's change the hello world components which come with the default Vue application using CLI . 

I will change helloworld.vue file into :

1. helloworld.vue ( template)
2. helloworld.style.ts ( style)
3.  helloworld.ts ( functionality)

I am showing the pictures so you get the basic idea of how to use jss in vue

helloworld.style.ts

helloworld.ts

        

helloworld.vue

            

thanks for reading :)