How to use Vue Components in your ASP.NET core application

John Olawale — Thu, 28 May 2020 04:45:55 +0000

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

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.

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.

<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

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

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

<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.

npm install cross-env --save-dev

Add the following to your package.json file.

"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

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.

<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".

To get more on how you can configure your build scripts, read the Laravel mix documentation.

Video description can be found on YouTube

Thanks for reading. 😉