title: How can I use the Vue.js code from a webpack bundle in a Razor page?
body: <p>Here is my Razor page code:</p>
  
  <pre><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")
  }
  
  &lt;div id="app_container"&gt;
      {{text}}
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the entry of the webpack javascript:</p>
  
  <pre><code>import Vue from 'vue';
  
  const v = new Vue({
      el: '#app_container',
      data: { text: 'abcdefg' }
  });
  </code></pre>
  
  <p>Webpack config:</p>
  
  <pre><code>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')
              }
          })
      ]
  };
  </code></pre>
  
  <p>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".</p>
  
  <p>If I added following code after the <code>div</code>:</p>
  
  <pre><code>&lt;script&gt;
      const v = new Vue({ el: "#app_container", data: { text: "abcdefg" } });
  &lt;/script&gt;
  </code></pre>
  
  <p>or add following code and remove the javascript file from @section Scripts part</p>
  
  <pre><code>&lt;script src='~/Static/vue/assets/bundle.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It works.</p>
  
  <p>So how can I make my webpack bundle work with the @Scripts.Render in Razor page?</p>