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

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?

Answer 1

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.

Answer 2

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.