CODEWITHSUNDEEP
asp.net-mvcwebpackvue.js
Kai Kang
Kai Kang

Reputation: 31

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

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?

Upvotes: 1

Views: 3258

Answers (2)

Kai Kang
Kai Kang

Reputation: 31

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.

Upvotes: 2

Marcom
Marcom

Reputation: 4741

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.

Upvotes: 0

Related Questions