Hi there, since v0.1.1 been released since 17 hours ago on GitHub but on npm it's still v0.1.0, jut let you know :)

Hello + thanks for this!

Trying to plug it in my existing ES6 project i followed the ES6 instructions
after a lot of fiddling, i found this to be working:

import alert from 'vue-strap/src/Alert.vue'

however, by using the examples in the doc i got some errors:
import alert from 'vue-strap/src/alert' errors with Cannot find module 'vue-strap/src/alert' from '/Users/m/dev/php/proj/resources/assets/js/components'

and the other example in doc give another error:
import { alert } from 'vue-strap'; errors with 'import' and 'export' may appear only with 'sourceType: module' node_modules/vue-strap/src/utils/EventListener.js:29

and when attempting to use the dropdown component, not even the trick i mentioned above seems to work (also errors about EventListener.js:29)

so i guess this issue is about if the doc should be updated, or maybe i'm doing something wrong here.

using browserify with babel + vue 1.0 and the vue-strap 1.0.0 release

Im trying to pass two variables from a table within one child vuestrap modal component. That modal will be reused from all the TD's of the table where the checkbox calls the modal. but Im not understanding the logic to do that. I have opened a question, I would apreciate if you can help. https://laracasts.com/discuss/channels/code-review/how-to-pass-data-to-a-vuestrap-component
http://stackoverflow.com/questions/33149197/how-to-pass-data-to-a-vuestrap-modal-component

See for yourself, Inside the custom modal content the header, the body and the footer is being displayed 3 times, it is not my issue because the tag is okay, and the bug comes inside it.
http://postimg.org/image/7ag8m66ul/284680fb/
Using the v.1

Hi,Can you give a full example about how to use in nodejs

ERROR in ./~/vue-strap/src/main.js
Module parse failed: F:\javascript\vuejs\vue-webpack-example\node_modules\vue-st
rap\src\main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export alert from './Alert.vue'
| export carousel from './Carousel.vue'
| export slider from './Slider.vue'
@ ./src/main.js 6:12-32

The panels' maxHeight is 0 in modal.

e.g.

<v-select :options="options"> </v-select>

...
data() {
    options: []
},
ready() {
    // get the options from some where...
    this.options.push({label: 'hello', value:1})
}
...

the console error:

Uncaught TypeError: Cannot read property 'removeChild' of nullremove @ vue.common.js?e881:1157(anonymous function) @ vue.common.js?e881:1021applyTransition @ vue.common.js?e881:1049removeWithTransition @ vue.common.js?e881:1020singleRemove @ vue.common.js?e881:4400insert @ vue.common.js?e881:4567update @ vue.common.js?e881:4558_update @ vue.common.js?e881:7614Watcher.run @ vue.common.js?e881:3192runBatcherQueue @ vue.common.js?e881:2933flushBatcherQueue @ vue.common.js?e881:2907nextTickHandler @ vue.common.js?e881:429
vue.common.js?e881:3161 Uncaught Error: [vue] async stack trace

Is it possible to do

router.map({
    '/': {
        component: home
    },
    '/sliders': {
        component: sliders
    },
    '/news': {
        component: news
    }

});

var App = Vue.extend({

    components: {
        'tab':Vuestrap.tab,
        'tabs':Vuestrap.tabset
    }

});
router.start(App,'#admin');

and then at the html side using the vuestrap tabs map v-link to the routes?

<tabs>
         <tab  header="home">//v-link
         <router-view></router-view>
         </tab>
         <tab  header="news">//v-link
          <router-view></router-view>
         </tab>
         <tab  header="sliders">//v-link
          <router-view></router-view>
         </tab>

</tabs>

having a Json Object returned from the server, like
[0 => 'email =>'[email protected]']] up to 10
how can I access it?
i tried

 <typeahead v-if="atrib.where=='sendto'"
                    key="items"
                    async="http://mysite.dev/search/"
                    placeholder="Busca Email"
                    template="{{customTemplate}}">
</typeahead>

 data: function () {
        return {
            customTemplate:'<span>{{items.email}}</span>',

but I get the

TypeError: e[t.key] is undefined

*I've got the errors in console after running 'webpack' *

ERROR in ./~/vue-strap/src/main.js Module parse failed: /Users/Pan/Documents/Js/js framework/Vue/vue-strap/demo/node_modules/vue-strap/src/main.js Line 1: Unexpected token You may need an appropriate loader to handle this file type. | export alert from './Alert.vue' | export carousel from './Carousel.vue' | export slider from './Slider.vue' @ ./~/babel-loader?optional[]=runtime!./~/vue-loader/lib/selector.js?type=script&index=0!./src/app.vue 5:11-31

My app.vue

//...
module.exports = {
components:{
    alert: require('vue-strap').alert
  }
//...
}
//...

My webpack.config.js

var vue = require('vue-loader'),
  path = require('path'), //
  nodeRoot = path.join(__dirname, 'node_modules');
module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    filename: "build.js"
  },
  resolve: {
    root: [nodeRoot]
  },
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: "vue"
    }]
  },
  devtool: 'source-map'
}

Is there an ETA on 1.0 support?

not a issue, just suggest to create a gitter chart

i want to use it like this:

require('vue-strap').alert

but it report errors below:

Module build failed: TypeError: this._init is not a function
at Object.Vue (E:\vue\vue-strap1\node_modules\vue-strap\node_modules\vue\src
\vue.js:19:8)

the code in the vue-strap/src/main.js file:

var _AlertVue = require('./Alert.vue');

exports.alert = _AlertVue;

p.s: webpack.config.js has vue-loader and babel

The second 'c' is missing.
The file "chekboxBtn.vue" should be called checkboxBtn.vue

The position calculation in popoverMixins.js is not working with the dynamic generated content, I've changed the trigger.offsetXX to trigger.getBoundingClientRect().XX and is working, but not sure if it is the right way.

Im sending a request, but it is empy (with typeahead) the docs dont say how to ..

 <typeahead v-if="atrib.where=='sendto'"
                    key="email"
                    async="http://mysite.dev/search/q="
                    placeholder="search ..."
                    on-hit="{{present}}">
</typeahead>

Hi,
It seems that at the moment VueStrap is not compatible with some Bootstrap javascript components.
I know that VueStrap is thought to replace the Bootstrap javascript components, but it would be nice that the two .js files could coexist peacefully.

As an example, let's take the tab plugin. This is a working example with Bootstrap 3.3.5. : https://jsfiddle.net/qy928t5f/

The same, identical, example with VueStrap as an external resorce is here: https://jsfiddle.net/4b06dee5/1/ . The behaviour is buggy.

Could you fix it?

Thanks

Hello i have the following HTML code

<div class="col-lg-2" id="checkbox">
<checkbox-group value="{{checkboxValue}}" type="default">
<checkbox value="sucessful">Sucessful</checkbox>
<checkbox value="failed" >Failed</checkbox>
</checkbox-group>
<p>{{checkboxValue | json}}</p>
</div>

And the following JS code

var ch = new Vue({
components: {
'checkbox-group' : VueStrap.checkboxGroup,
'checkbox' : VueStrap.checkboxBtn

 },
  el: '#checkbox',

  data: function(){
    return {checkboxValue: []}
  }


});

i can see the graphics works but the value dont get updated when clicking

Cpuld you help me please

Hello i have the following html code
<div class="col-lg-2" id="typeahead">
<typeahead data="{{list}}" placeholder="Check Name" on-hit="{{slect}}">> </typeahead>
<p>{{item}}</p>
</div>

and the followign js code

new Vue({
components: {
'typeahead': VueStrap.typeahead,

},
el: '#typeahead',
data: {
list: ['Name1', 'Name2', 'Name3'],
item: ''
},

methods: {
select: function (item, targetMV) {
this.$set('item', item);
}
}
});

i get the following error en IE 11
Object doesn't support property or method 'onHit'

and the followign error on Chrome

Uncaught TypeError: this.onHit is not a functions.methods.hit @ vue-strap.min.js:2(anonymous function) @ vue.min.js:6handler @ vue.min.js:7

How to use vue-strap with CommonJs writtern in guide?

The dist js has not been compiled since your latest bugfixes, so the CDN versions and the browser global versions are bugged, especially the modal components.

The following error occurs when trying to import a module from vue-strap.

./~/vue-strap/src/main.js
Module parse failed: /Users/Jeffrey/Sites/AHUD/node_modules/vue-strap/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export alert from './Alert.vue'
| export carousel from './Carousel.vue'
| export slider from './Slider.vue'
 @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Planning/Goals.vue 7:16-36

webpack.config.js

var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var vue = require('vue-loader')
var path = require('path')
var nodeRoot = path.join(__dirname, 'node_modules')

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {test: /\.vue$/, loader: 'vue'},
      {test: /\.js$/, exclude: /node_modules|main.js|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//, include: /node_modules\/vue-strap\/src/, loader: 'babel'},
      {test: /\.(png|jpg|gif)$/, loader: 'file?name=[name].[ext]?[hash]'}
    ]
  },
  // example: if you wish to apply custom babel options
  // instead of using vue-loader's default:
  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime'],
    cacheDirectory: true
  },
  // Vue Settings
  vue: {
    loaders: {
      // css: ExtractTextPlugin.extract("css"),
      // stylus: ExtractTextPlugin.extract("css!stylus"),
      // js: 'babel?optional[]=runtime&loose=all'
    }
  }
}

Package.json

{
    "name": "ahud",
    "version": "0.1.0",
    "description": "AHUD",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server --inline --hot --quiet",
        "build": "export NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
        "vue": "^1.0.0",
        "vue-strap": "^0.1.2",
        "vue-router": "^0.7.5",
        "vue-resource": "^0.1.16",
        "d3": "^3.5.6",
        "nvd3": "^1.8.1",
        "plotly.js": "^1.0.0"
    },
    "devDependencies": {
        "babel-core": "^6.1.2",
        "babel-loader": "^6.1.0",
        "babel-plugin-transform-runtime": "^6.1.2",
        "babel-preset-es2015": "^6.1.2",
        "babel-preset-stage-0": "^6.1.2",
        "babel-runtime": "^6.0.14",
        "css-loader": "^0.21.0",
        "extract-text-webpack-plugin": "^0.8.2",
        "file-loader": "^0.8.4",
        "jade": "^1.11.0",
        "style-loader": "^0.13.0",
        "stylus-loader": "^1.4.0",
        "template-html-loader": "0.0.3",
        "vue-hot-reload-api": "^1.2.0",
        "vue-html-loader": "^1.0.0",
        "vue-loader": "^7.0.0",
        "webpack": "^1.12.3",
        "webpack-dev-server": "^1.12.0"
    }
}

I've tried all the tricks from other threads talking about this.

nam install vue-strap --save-dev

require('vue-strap');

Error: Cannot find module "vue-strap"

then i use tag script,it works.
but i want to use require,how can i do?

Hey! First of all, this looks promising :)

It would be nice if the datepicker could be extended to allow time as well. Something like this plugin:
https://eonasdan.github.io/bootstrap-datetimepicker/

Localization would also be neat feature.

How can use some of the components (select, checkbox etc) in forms to sent there values via http requests? Maybe I miss something?

I was browsing through the code and it seems the close callback is hardcoded(by just setting this.show to false).

It would be nice to actually define a close callback, where we for example could do some model cleanup when closing the modal (through the close button or by clicking the background).

I might be missing something though, I'm still new to VueJS

Please can you provide code examples to each of the elements with how to use them. I cannot get the aside to work.

To disable/enable close modal by clicking on the dimmer

Nov 20, 2015

• Vue v1.x support.
• Tabs components bug. #34
• A collapse component. #21
• More modal controls. #19 #37
• CI and better dev tools.

Nov 30, 2015

• Search for select component. (available in 1.0.3 - must use a collection).
• Localization for datepicker component.
• Refactor tooltip and popover components.
• Refactor dropdown component.
• A new Slider component.
• Dropdown collapse support? #58

Dec 10, 2015

• JSFIDDLE live edit on documents.

Dec 30, 2015

• Tests.

When Bootstrap v4 lands (date TBD)

• Compatibility with bootstrap v4. (work is underway, see progress in bootstrap4 branch)
• New Combobox widget (single select, with ability to type in, which is sort of like search enabled select (which is is 1.0.3 already). This allows you to set free text input as well.
• A new timepicker components. #26 (this could be ported back to bootstrap v3 if people need it badly).

Sorry for the delay. I was so busy for some company stuff in past few days.

On you todo list, I saw a testing as a todo and I think this is a must for development.

So what's is your unit testing planning for this project =)

I tried the modal successfully but the aside is not working.

When I inspect my element in the DOM the aside-element is correctly build but I always get this error in my console: Uncaught SyntaxError: Unexpected token < on Aside.vue:1

I just begin to use vue.js and vue-strap, thanks for your work, they are excellent!
Do you think can we add bootstrap-table to vue-strap like bootstrap-select?

When opening a modal when the window has no scroll bar, padding is still added to the body - this causes the content of the window to the left.

// no scrollbar

// still adds padding

Hey!

First of all, awesome library. I would like to know if a timepicker would be out of scope. Really need it.

Thanks!

I have posted it on the laracasts forum post here for reference:

https://laracasts.com/discuss/channels/general-discussion/vuestrap-bootstrap-components-built-with-pure-vuejs?page=3#reply-106358

Essentially would be great to have multiple insertion points or full support for inline-template.

When I used inline-template it only left some of my template intact and tried to replace/remove other items.

Currently, the modal only allows custom content in the body. The vast majority of my use cases involve, at a minimum, changing the names of the button in the footer, and adding an icon to the title. So, my proposal would be to change the template to this:

<template>
  <div class="modal fade" role="dialog"
    v-class="
    fade:effect === 'fade',
    zoom:effect === 'zoom'"
    >
    <div class="modal-dialog" role="document"
      v-style="width: width + 'px'
      ">
      <div class="modal-content">
        <content select=".modal-header">
          <div class="modal-header">
            <button type="button" class="close" v-on='click:close'><span>&times;</span></button>
            <h4 class="modal-title" >{{title}}</h4>
          </div>
        </content>
        <content select=".modal-body">
          <div class="modal-body"></div>
        </content>
        <content select=".modal-footer">
            <div class="modal-footer" v-show="footer">
            <button type="button" class="btn btn-default" v-on='click:close'>Close</button>
            <button type="button" class="btn btn-primary" v-on='click:callback'>Save changes</button>
          </div>
        </content>
      </div>
    </div>
  </div>
</template>

Which means a modal could be defined like this:

<modal show="showModal">
    <div class="modal-header">
        <h4 class="modal-title"><i class="fa fa-ge"></i> Modal title</h4>
    </div>
    <div class="modal-body">
        <p>So, this is a thing.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" v-on="click: showModal = false">Save changes</button>
        <button type="button" class="btn btn-secondary" v-on="click: showModal = false">Close</button>
    </div>
</modal>

This does bring up the issue that closing a modal is a little difficult if you override footers, but you can handle that with v-ref. Assuming we add v-ref="coolModal" to the above modal definition, the user can do:

var app = new Vue({
    methods: {
        close: function(){ this.$.coolModal.close(); }
    }
});

I'm not sure of a better way to handle this case in Vue, but I'd rather have to deal with that, then not be allowed to add content, or change buttons on modals.

Hi,
i'm not sure if my issue is in fact a vue-strap issue, but i think you can tell me.
i have a quite simple setup using tabs in this gist.
Everything works perfect, except: the content of the active tab is not showing.
the the active div[role=tabpanel] has .tab-pane.fadein-transition
the inactive has .tab-pane.fadein-transition.hide,
but there is a style:
.tab-content > .tab-pane{ display:none; }

i can easily just delete or overwrite this rule, but that seems strange to me.

even your demo-page has this bug :)

is that some quirk in boot-strap or is this a vue-strap bug?

Thanks, Schorsch

Trying to use the https://github.com/yuche/vue-strap/blob/v1/dist/vue-strap.min.js
and '

    components: {
        'datepicker': VueStrap.datepicker
    },

return this message: Unknown custom element: - did you register the component correctly?

trying to access VueStrap.datepicker from the console return undefined.
However VueStrap.default.datepicker is working, which is different from 0.12.
Is this intended?

Create and Edit actions could share the same modal because their structure for filling or modifying things are the same, so Im trying based on the action the user enters to Pass to the modal, the title of the action with:

 <modal v-bind:title="'{{atrib.title}}'" v-bind:show="modalName.showMod" v-bind:effect="'fade'" v-bind:width="800">

but it only shows
literal {{atrib.title}} because it is surrounded by simple quotes, if I take the quotes of it gives me an error
Invalid expression. Generated function body: {{scope.atrib.title}}"

I would like to use Vue-strap with bower. Is that possible ??

Great work by the way, i like it 👍

Is it possible for this to be added in, not sure whether it would be a headerless panel or a separate collapse component but it would be really useful to have it either way so you can have a headerless collapsible panel.

For example I have a header for a section with some icons as buttons to trigger the panel:

            <h4>
                Notes
                <a class="pull-right">
                    <span class="glyphicon glyphicon-plus"
                          v-on="click: showNoteForm = !showNoteForm"
                    ></span>
                </a>
            </h4>

            <panel is-open="{{ showNoteForm }}">
                Test
            </panel>

file:a.vue

<template>
    <div class="view" transition>
      <h1>This is page B.</h1>
      <p>I'm... a bit less complicated.</p>
    </div>
    <alert/>
</template>
<script>
import {alert} from 'vue-strap'
export default{
    components:{
        alert
    }
}
</script>
]

Error info

./~/vue-strap/src/main.js
Module parse failed: /Users/apple/Documents/codes/im-web-admin/node_modules/vue-strap/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export {alert}  from './Alert.vue'
| export {carousel} from './Carousel.vue'
| export {slider} from './Slider.vue'
 @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/views/b.vue 7:16-36

elixir(function(mix) {
    mix
        .sass('admin/app.scss', 'src/public/admin/css/app.css')
        .browserify('admin/app.js', 'src/public/admin/js/bundle.js')
});

apps.js contains:

// Bootstrap
'accordion': require('vue-strap').accordion,
'datepicker': require('vue-strap').datepicker,
'modal': require('vue-strap').modal,
'panel': require('vue-strap').panel,

I am just calling the above with elixir 3.3.3 and receiving the error:

[20:02:31] gulp-notify: [Laravel Elixir] Browserify Failed!: 'import' and 'export' may appear only with 'sourceType: module'

Any pointers would be much appreciated as there is little to no info regarding this specific integration. I tried solutions to similar issues to no avail.

Apologies if this is better suited as an issue with Elixir.

Thanks.

hello,im a Chinese,it looks like that the component 'app.vue' has a different language concerning the button 'confirm' and the button 'close'.i want to translate it to chinese,so i rebuild vue-strap,but npm reported an error,can you help me to handle it?thanks!
i use OS X

run

npm run build

then

module.js:339
throw err;
^

Error: Cannot find module 'optimist'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/private/var/www/poimoe/web/poi/node_modules/.bin/webpack:15:16)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: webpack --progress --hide-modules --config webpack.build.min.js && webpack --progress --hide-modules --config webpack.build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --progress --hide-modules --config webpack.build.min.js && webpack --progress --hide-modules --config webpack.build.js'.
npm ERR! This is most likely a problem with the vue-strap package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --progress --hide-modules --config webpack.build.min.js && webpack --progress --hide-modules --config webpack.build.js
npm ERR! You can get their info via:
npm ERR! npm owner ls vue-strap
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /private/var/www/poimoe/web/poi/node_modules/vue-strap/npm-debug.log

then i try to

npm install optimist -g
npm install optimist --save-dev

the same

Hello and thanks for all your work!

the Dropdown component currently don't support the data-toggle="collapse" as used in the collapsible navbar (actually i'm not sure the collapse thing is part of a dropdown component, maybe it should be a separate component...):

http://getbootstrap.com/javascript/#within-a-navbar (resize width really small to see the effect)

i made a variation out of your Dropdown component to handle this, it is rough but seems to work (transition is missing), i saw you had "dropdown" rework on the todo list, so feel free to incorporate parts of this:

<template>
    <div class="navbar-header">
        <slot></slot>
        <slot name="dropdown-menu"></slot>
    </div>
</template>

<script>
import EventListener from './../EventListener';
export default {
    methods: {
        toggleCollapse(e) {
            e.preventDefault();

            // collapse data-target
            var tmp = this.$el.querySelector('[data-target]');
            var id = tmp.getAttribute('data-target');
            var o = document.getElementById(id.substring(1));
            o.classList.toggle('collapse');
        }
    },
    ready() {
        const toggle = this.$el.querySelector('[data-toggle="collapse"]');
        if (toggle) {
            toggle.style.borderRadius = '4px';
            toggle.addEventListener('click', this.toggleCollapse);
        }
        this._closeEvent = EventListener.listen(window, 'click', (e)=> {
            if (!this.$el.contains(e.target)) {
                this.$el.classList.remove('open');
            }
        })
    },
    beforeDestroy() {
        if (this._closeEvent) {
            this._closeEvent.remove();
        }
    }
}

I have tried three approachs below, but no one works:

• Context: I use npm + webpack

Error stacks

• import {Aside} from 'vue-strap'

Uncaught Error: Cannot find module "vue-strap"

./~/vue-strap/src/main.js
Module parse failed: /Users/xxxxxxx/frontend/node_modules/vue-strap/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export alert from './Alert.vue'
| export carousel from './Carousel.vue'
| export slider from './Slider.vue'
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue 5:16-36

• import {Aside} from 'vue-strap/src/aside'

Uncaught Error: Cannot find module "vue-strap/src/aside"

./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue
Module not found: Error: Cannot resolve module 'vue-strap/src/aside' in /Users/xxxxx/frontend/src/components
resolve module vue-strap/src/aside in /Users/xxxxx/frontend/src/components
  looking for modules in /Users/xxxxx/frontend/node_modules
    resolve 'file' or 'directory' src/aside in /Users/xxxxx/frontend/node_modules/vue-strap
      resolve file
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.webpack.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.web.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.json doesn't exist
      resolve directory
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside doesn't exist (directory default file)
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside/package.json doesn't exist (directory description file)
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.webpack.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.web.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.json]
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue 6:24-54

• import Aside from 'vue-strap/src/Aside.vue'

Uncaught Error: Cannot find module "./utils/EventListener.js"

./~/vue-strap/src/utils/getScrollBarWidth.js
Module parse failed: /Users/xxxxx/frontend/node_modules/vue-strap/src/utils/getScrollBarWidth.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export default ()=> {
|   let inner = document.createElement('p')
|   inner.style.width = '100%'
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Aside.vue 11:32-71

./~/vue-strap/src/utils/EventListener.js
Module parse failed: /Users/xxxxx/frontend/node_modules/vue-strap/src/utils/EventListener.js Line 29: Unexpected token
You may need an appropriate loader to handle this file type.
| }
| 
| export default EventListener
| 
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Aside.vue 7:28-63

Hello,
I have tried
#19 (comment)
but it doesn't fix the problem.
my app.js is

window.Vue = require('vue');
var resource = require('vue-resource');
window.Vuestrap = require('vue-strap/src/Alert.vue');
Vue.use(resource);

@yuche what is the solution?