Vue - how can i load CSS and JS files in a component?

Question

I'm very new to Vue and i created a navbar component that i want to load.

Here is my code:

component.vue

<template>
    <html>
        <head>
        ...
        <link href="https://fonts.googleapis.com/css?family=Gudea:400,700" rel="stylesheet">
        <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">

        <!-- Theme Styles -->
        <link href="assets/css/flatifytheme.min.css" rel="stylesheet">
        <link href="assets/css/custom.css" rel="stylesheet">
        ...
        </head>
        <body>
         ...
        
         <script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
         <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
         <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
         <script src="assets/plugins/waves/waves.min.js"></script>
         <script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
         <script src="assets/plugins/switchery/switchery.min.js"></script>
         <script src="assets/plugins/pace/pace.min.js"></script>
         <script src="assets/js/flatifytheme.min.js"></script>

        </body>
    </html>
</template>

The assets directory is in the same folder as the component.

Now the problem is that i have a lot of <link href=''> and <scripts> tags that load js and css files of the theme i'm using for the navbar and i don't know where to put them in the component, so i keep getting the following error:

This relative module was not found:
* ./components/testComponent in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

What does this error mean? How can i fix it?

darkylmnx · Accepted Answer · 2020-12-24 20:11:45Z

2

There are two ways of doing this:

Either these are global files in your project
- load the remote files (google fonts any http files) directly in your index.html
- load the project files via the bundler in your main.js or App.vue
- with import '@/assets/plugins/bootstrap/css/bootstrap.min.css' and so on...
Or, these are local files that need to be loaded in specific components
- load the remote files (google fonts or any http files) with vue-meta plugin which helps your create links, script and other HTML tags on-the-fly in the head tag https://vue-meta.nuxtjs.org/api/#link
- load the project files with import '@/path/to/js/file' for JS files or for CSS:

<style>
@import '@/path/to/js/file';
</style>

answered Dec 24, 2020 at 20:11

darkylmnx

2,1215 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack022 Over a year ago

This is very clear! thank you a lot for answering!

Lundstromski · Accepted Answer · 2020-12-24 19:00:53Z

1

Use @import in the style tag to import CSS-files.

@import './assets/plugins/font-awesome/css/font-awesome.min.css'

Also the paths to the files are incorrect, use ./.

./assets/plugins/jquery/jquery-3.1.0.min.js

answered Dec 24, 2020 at 19:00

Lundstromski

1,2472 gold badges9 silver badges18 bronze badges

2 Comments

Jack022 Over a year ago

Thank you! So basically below </template>, i should add a <style></style> with inside the import you mentioned? Do i have to do this for both the link href and script tags?

Lundstromski Over a year ago

No worries! Yes, Javascript-files are included like this it seems: stackoverflow.com/questions/55530604/… :)

Collectives™ on Stack Overflow

Vue - how can i load CSS and JS files in a component?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related