How to use Vue Components in your ASP.NET core application
Tags: vue, tutorial, aspnet, webdev
Published: 2020-05-28 04:45:55

There are times you want to create a traditional ASP.NET core app or you already have one but you also want to take advantage of the SPA development workflow that frontend JavaScript frameworks like VueJs offers. You will see how to do that in this article.

A popular PHP framework called Laravel already has Vue integrated to it out-of-the-box, which allows you to register and use Vue components in its template engine with ease. We are going to use a similar approach in this article.

##Let’s get started


###Create a new ASP.NET application
The first thing we do is create a new ASP.NET core MVC application. If you have an existing application, you can skip this step.

Add VueJs
```bash 
npm init -y
npm install vue
```

Next, create the Vue starting point file. 
Create a folder called `vue` and add a file called `app.js` with the following content.

```javascript
const Vue = require('vue');
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

const app = new Vue({
    el: "#app"
});
```

The code above automatically registers all our Vue components in the vue folder.

We can also see from the code above that we are mounting Vue to an element with an id of app so go to your `Views/Shared/_Layout.cshtml` file and surround everything in the body with a div with an id of app.

```html
<body>
    <div id="app">
        <header>
        ....
    </div>
</body>
```

###Create the build script

For us to run our Vue code in our application, we will need to bundle it into a JavaScript file and then include it in our template. Ideally, we would use a build tool like Webpack but setting it up and configuring it might become overwhelming.
Luckily for us, we can just use a package created for the Laravel framework I mentioned earlier. The package is called "laravel-mix".

> Laravel Mix is an elegant wrapper around Webpack for the 80% use case.

Install laravel-mix

```bash
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
```

Go to the webpack.mix.js file and replace everything with the code below

```javascript
let mix = require('laravel-mix');
mix.js('vue/app.js', 'wwwroot/js');
```

This compiles the app.js in the `vue` folder and creates an app.js file in your `wwwroot/js` folder.

###Create your first vue component

This is where the fun begins. 🙂
Create a new file `vue/components/FirstComponent.vue` and add the content below

```javascript
<template>
    <div>
        The year is {{ year }}
    </div>
</template>
<script>
    module.exports = {
        data() {
            return {
                year: new Date().getFullYear()
            }
        }
    }
</script>
```

Before we bundle, we need something that will help us handle different build configurations for different environments.
This is where the `cross-env` npm package comes in.

```bash
npm install cross-env --save-dev
```

Add the following to your package.json file.

```json
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
```

The scripts above are what you would run depending on your environment.
- dev: when you are in the development environment
- watch: when you want to watch for file changes
- prod: when you want a dist version of your bundled file

For our current scenario, you can just use the dev script

```bash
npm run dev
```

Now, you should see an `app.js` file in your `wwwroot/js folder`.


###Using the bundled file

Go to your `Views/Shared/_Layout.cshtml` file and add the following script tag to your head tag.

```html
<script src="~/js/app.js" defer /></script>
```

Also, just before the `RenderBody()` method in your layout file, place the FirstComponent tag `<first-component />`.

Run your ASP.NET core application and open it in the browser, you should see the output of the component.

##Conclusion

This is article is just for getting started with using Vue components in your ASP.NET applications.

For more on what VueJs can offer, visit the ["official website"](https://vuejs.org/).

To get more on how you can configure your build scripts, read the [Laravel mix documentation](https://laravel-mix.com/docs/5.0/installation).

Video description can be found on [YouTube](https://www.youtube.com/watch?v=lAUrLJAUrR8)

Thanks for reading. 😉