More control over modal contents and issues with inline-template

[andrewdavidcostello]

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.

[yuche]

See new modal components with custom template. http://yuche.github.io/vue-strap/#modal

[andrewdavidcostello]

I had to delete my node modules and reinstall as an update didn't work.

After updating the custom templates work perfectly! Thanks for sorting so quickly, now I can work on ditching jQuery and bootstrap.

[kamal-chagam]

@andrewdavidcostello I have this error Browserify Failed!: 'import' and 'export' may appear only with 'sourceType: module' .
I did window.VueStrap = require('vue-strap'); // i tried even full path also
new Vue ({
components:{
alert : VurStrap.alert;
})

what is the mistake I did ?

[yuche]

@chagamkamalakar
Try:

var alert = require('vue-strap/src/Alert.vue');

[kamal-chagam]

@yuche
now the error is as follows..
Browserify Failed!: Parsing file /../../../node_modules/vue-strap/src/Alert.vue: 'import' and 'export' may appear only with 'sourceType: module' ..

[andrewdavidcostello]

@chagamkamalakar You are probably experiencing this issue?

#13

To get around this I use

window.VueStrap = require('vue-strap/dist/vue-strap.min.js');

components: {
        // Bootstrap
        'alert': VueStrap.alert,
        'datepicker': VueStrap.datepicker,
        'modal': VueStrap.modal,
        'panel': VueStrap.panel,

Not a nice solution but it works for now.

[kamal-chagam]

@andrewdavidcostello
when i tried earlier .. it was complied with no error. but alert box is displayed like normal text .. i coded as bellow

in main.js file i did like

window.VueStrap = require('vue-strap/dist/vue-strap.min.js');

---

list.template.js

<div>
    <h2>Hotel listing</h2>
    <table class="table table-responsive table-bordered">
        <tr>
            <th>Name</th>
            <th>Latest Booked</th>
        </tr>
    </table>
    <button class="btn btn-default btn-lg"
            v-on="click:showRight = !showRight">
        Click to toggle alert on right
    </button>
    <alert
            show="{{@showRight}}"
            duration="3000"
            type="success"
            width="400px"
            placement="top-right"
            dismissable>
        <span class="icon-ok-circled alert-icon-float-left"></span>
        <strong>Well Done!</strong>
        <p>You successfully read this important alert message.</p>
    </alert>
</div>

---

list.js

module.exports = {
    template: require('./list.template.html'),

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

    data: function() {
        return {
            showRight: false,
            showTop: false
        }
    }
}

It's not working, what it went wrong