where to keep the css js images files in vue project

Question

I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?

Answer 1

Inside src/assests paste your css, fonts and image folders like here

then make sure to include them in main.js/ts eg.

    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
    import './assets/css/materialdesignicons.min.css'
    import './assets/css/tiny-slider.css'
    import './assets/css/style.css'
    import './assets/css/colors/default.css'

if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc.

NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed

Answer 2

you can keep your CSS and Js file inside the src directory rather than public. public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.