Vue-multiselect: Failed to load src: "vue-multiselect/dist/vue-multiselect.min.css"

Created on 4 Mar 2017  Â·  7Comments  Â·  Source: shentao/vue-multiselect

Following the new readme, I'm suddenly receiving this when I compile. 

"vue-multiselect": "2.0.0-beta.14",

From one of my files, I've added the below line per the new readme for beta.14

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
question
Source
picture jaketoolson
👍1

Most helpful comment

It worked for me in a Vue file (Laravel Mix), however, I had to reference the npm module and not some other project location. So:

<template>
    <div>
        ... [code]
    </div>
</template>
<script>
    export default {
        ... [code]
    }
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Note that the Laravel Mix bundler assumes these files are located under node_modules project folder. I could never get it to pull in from anywhere else, which probably requires some adjustment to the webpack configuration. Also, I had to make sure I was on the latest Node/npm, and also, Mix plugin. Finally, recently I have had to delete and reinstall my node modules due to problems with the vue-loader plugin. That helped.

Or per plugin author, you can just include the raw css in the <head></head> project layout app.

picture OliverGrimsley on 6 Mar 2017
👍2

All 7 comments

This doesn't work if using gulp, vueify and .vue files. Has anybody figured out how to make this work in a compiled .vue file?

ryanrca picture ryanrca on 6 Mar 2017

This is an example used with a module bundler like webpack. If you don’t have one – just add the files as a static @import somewhere in your main.css file.

shentao picture shentao on 6 Mar 2017

It worked for me in a Vue file (Laravel Mix), however, I had to reference the npm module and not some other project location. So:

<template>
    <div>
        ... [code]
    </div>
</template>
<script>
    export default {
        ... [code]
    }
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Note that the Laravel Mix bundler assumes these files are located under node_modules project folder. I could never get it to pull in from anywhere else, which probably requires some adjustment to the webpack configuration. Also, I had to make sure I was on the latest Node/npm, and also, Mix plugin. Finally, recently I have had to delete and reinstall my node modules due to problems with the vue-loader plugin. That helped.

Or per plugin author, you can just include the raw css in the <head></head> project layout app.

OliverGrimsley picture OliverGrimsley on 6 Mar 2017
👍2

I got it to work, but for some reason, browserify / vueify (I'm still using laravel elixir, 1 release behind), could not find the .css file. I had to put in a full path: