How can I use the Vue.js code from a webpack bundle in a Razor page?

Question

Here is my Razor page code:

@using System.Web.Optimization;

@{ BundleTable.Bundles.Add(
       new ScriptBundle("~/Scripts/Vuejs")
            .Include("~/Static/Scripts/Vuejs/vue.min.js")); }

@section Scripts {
    @Scripts.Render("~/Static/vue/assets/bundle.js")
    @Scripts.Render("~/Scripts/Vuejs")
}

<div id="app_container">
    {{text}}
</div>

and here is the entry of the webpack javascript:

import Vue from 'vue';

const v = new Vue({
    el: '#app_container',
    data: { text: 'abcdefg' }
});

Webpack config:

export default {
    entry: [
        'babel-polyfill',
        './src/index.js'
    ],

    output: {
        filename: 'bundle.js',
        path: 'C:/WebSandbox/Static/vue/assets',
        publicPath: '/vue/assets/'
    },

    devtool: 'source-map',

    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue' },
            { test: /\.js/, loader: 'babel', exclude: /node_modules/ },
            { test: /\.json$/, loader: 'json' },
            { test: /\.txt/, loader: 'raw' }
        ]
    },

    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
                APP_ENV: JSON.stringify('browser')
            }
        })
    ]
};

All the javascript files are in place and when open the page I can see the mapped code from Developer Tools of Chrome. And if I make a break point in the javascript code, it will be hit. But the text displayed is "{{text}}", not "abcdefg".

If I added following code after the div:

<script>
    const v = new Vue({ el: "#app_container", data: { text: "abcdefg" } });
</script>

or add following code and remove the javascript file from @section Scripts part

<script src='~/Static/vue/assets/bundle.js'></script>

It works.

So how can I make my webpack bundle work with the @Scripts.Render in Razor page?

If adding the script tag fixes this, then the webpack part is working. Your issue may be in the rendering of the script sections. Check this stackoverflow.com/questions/16325027/… — Gerardo Grignoli
– Gerardo Grignoli, Commented Sep 25, 2016 at 14:51

Kai Kang · Accepted Answer · 2016-10-24 09:46:29Z

2

OK, now I found why the bundle not working:

Because the @RenderSection("Scripts", false) was written in the header of _Layout.cshtml. So the bundle JavaScript file will be referenced in the header. But when I switch to the raw reference (script tag), it will be after my div tag where it should be. When I change the bundle part to:

@section ScriptBlock {
    @Scripts.Render("~/Static/vue/assets/bundle.js")
}

It works.

The @RenderSection("ScriptBlock", false) was written in the bottom of the _Layout.cshtml right after the closing tag of body.

answered Oct 24, 2016 at 9:46

Kai Kang

311 silver badge9 bronze badges

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

Comments

Marcom · Accepted Answer · 2016-09-23 13:43:54Z

0

I use vuejs with asp.net with browserify rather than webpack. And the packing should be an independent build step. I setup a gulp task to take my vue code and bundle it up and place it in the scripts folder of asp.net.

I think you need to do something similar here.

answered Sep 23, 2016 at 13:43

Marcom

4,7718 gold badges56 silver badges79 bronze badges

Collectives™ on Stack Overflow

How can I use the Vue.js code from a webpack bundle in a Razor page?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related