How do I implement a html/css/js theme into Vue properly?

Question

I got a bootstrap theme that consists of HTML, CSS and Javascript. Now, I want to implement it (or let's say make it functional) in Vue. I have my index.html file that contains the container and it works. Now, my theme does have an index.html file as well. I just thought I can copy the whole file into the Vue-index.html and add the div with the id "app" around the area that changes the content. But it does not work. Basically, Vue does not load any external css or js files even though I reference them correctly (with relative reference using the dot: ./assets/css/style.css). It works inside a.vue-file (ie component) but not inside the index.html. What do I do wrong?

Yep, beginner here.

Answer 1

When you put them inside your index.html they are not compiled. You can read about it HERE

Answer 2

Your index.html is something called a target . Vue uses this file as a mounting point for the rest of the application, so it's kept relatively clean, most likely with just metadata and a DOM mounting point. It works by loading the index.html in the browser and then mounting your Vue application on top of it.

If you're trying to apply some styles to a Vue application/components, your best bet is to modify *.vue files inside the app source of your Vue project (typically, /your-project/src ). They will contain snippets of relevant sections/components alongside their logic (JavaScript) and styles (CSS/Sass), provided your project uses Single-File Components format.

---

For future reference: It's hard to offer a solution without knowing the structure of your project, what type of components you are using, or even having code samples to get an idea of how things are working inside.

We'd need more information to be able to help you more accurately, so maybe you could create a lightweight demo on an interactive platform like codesandbox.io ?