Extremely Basic
The most basic way to get started I know of with Vue in ASP.NET is just to include the Vue script in your project. You can use the vue.js Nuget package, which will add the Vue scripts to your Scripts directory and just include either the development or minified version in your MVC view.
<script src="~/Scripts/vue.min.js"></script>
Then in your view cshtml, just add a script block.
<script>
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
where #app refers to an element on your view. If you want to use a component, just add it to your script block.
<script>
Vue.component("child", {
template:"<h1>I'm a child component!</h1>"
})
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
and modify your Vue template.
<div id="app">
{{message}}
<child></child>
</div>
If you find yourself building a lot of components (which you likely will), extract them into a vue.components.js file or something similar, define all your components there, and include that on your views in addition to the vue script.
Using Single File Components
In order to use single file components, you need to integrate the node.js build process for single file components into your ASP.NET MVC build process.
Install node.js. After node.js is installed, install webpack globally.
npm install webpack -g
Add a package.json to your project. Here is what I use.
{
"version": "1.0.0",
"name": "vue-example",
"private": true,
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-env": "^1.1.8",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue-loader": "^11.1.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.0"
},
"dependencies": {
"vue": "^2.2.1"
}
}
I typically create a folder in my project to hold my Vue scripts and .vue files called Vue. Add a file to serve as the entry point for your Vue build process. We can call this index.js (or anything you want).
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Create App.vue.
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Add a webpack.config.js to your project. Here is what I use.
module.exports = {
entry: "./Vue/index.js",
output: {
path: __dirname,
filename: "./Vue/bundle.js",
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
This config specifies index.js as the entry point for webpack to figure out what to include in a bundle.js file, which will be compiled and put in the Vue folder.
In order to compile the bundle.js file whenever the project builds, I modify the project file to include the following.
<Target Name="RunWebpack">
<Exec Command="npm install" />
<Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>
This will install the necessary npm packages and then run webpack to build the bundle.js. This is necessary if you are building your project on a build server.
Now you just need to include the bundle.js file on a view that has an element with #app on it. You do not need to include vue.js or vue.min.js. That will be in the bundle.
Compile Individual Single File Components
We found there were times we wanted to use a single file component, but did not want to bundle it all into a single script. To do this, you mainly need only modify the webpack.config.js.
const fs = require("fs");
const path = require("path");
// build an object that looks like
// {
// "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };
return fs.readdirSync(path.join(__dirname, "Vue"))
.filter(file => file.endsWith(".vue"))
.reduce(reducer, {});
}
module.exports = {
entry: buildEntry(),
output: {
path: path.join(__dirname, "Vue"),
filename: "[name].js",
library: "[name]"
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
This webpack configuration will build a script file for every individual single file component. Then you can just include that script on a page where you are using the "Extremely Basic" technique above and use the component in your Vue by either exposing it globally or as part of the Vue. For example, if I have a Modal.vue, I would include Modal.js on the ASP.NET MVC view and then expose it to Vue by
Vue.component("Modal", Modal);
or
new Vue({
...
components:{
"Modal": Modal
}
})
Webpack is very configurable, so you may want to take a different approach and build a single bundle for each page.
Finally, you can open a command line while you are developing and run
webpack --watch
in your project directly and your bundle(s) or individual components will be built every time you save them.
