I’ve been using Vue JS (https://vuejs.org) for close to a year in a couple of my professional projects but never in the preferred way, meaning it still consisted of static HTML, Vue instances only containing the scripting and dedicated SASS-files for its styling. As components is the go-to method for web development nowadays, I really wanted to integrate this way of working into my MVC app(s).
There is SFC’s (single file components) but as you need Vue Loader and Webpack for that, this was not a real option for projects still using MSBuild and the standard ways of bundling. So on went my search but I wasn’t able to find a good centralized explanation on how to put it all together. Most blogs talk about using them in SPA’s and such with Webpack but never about using them in legacy projects… That’s why, after finally having figured out a good implementation, I planned to write a single blog-post about it hoping to save other people some time that could be spend on more lucrative features.
[UPDATE 2019/02/08] I didn’t stop to search for an SFC solution, found it and wrote about it in here… https://dev.to/keco39/vue-sfcs-in-an-aspnet-mvc-app-3e45
First, I’ll start with the 2 steps that are only needed the first time you would like to add support for Vue-components to your project.
Step 1 — Setting up TypeScript
I use TypeScript (https://www.typescriptlang.org) as my main scripting-language. Not only does it give you strong typing and improved intellisense but it also makes sure your templating strings will still work if you open your website in Internet Explorer. The reason for this is, when using a template string (read https://vuejs.org/v2/guide/components.html for more details) in multiple lines, you will need backticks for that. As backticks are an ES6 feature, Internet Explorer would not recognize the character in your template string and thus fail to render your component. Make sure you target ES5 within the tsconfig.json file so all backticks will be transpiled into single quotes, thus gaining support for older browsers.
Step 2 — Add a reference to the Vue library
As with all third-party libraries, you need to add Vue to the bottom of your webpage, above the scripts that will create and register your components (eg. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js).
Once these 2 steps are done, you never have to look at them again except for when you start a new project.
And now on to the cool bits, creating and registering your Vue components. For that, there are 4 steps.
Step 1 — Creating a component
I have a folder called ‘/js/components’ in which a TypeScript-file is created with a filename starting with vue-*, followed by the name of your component (preferably, the following words are also separated by a hyphen). How to create your component can be found in the official documentation on https://vuejs.org/v2/guide/components-registration.html
For example:
I prefer to assign the returning value to a variable and the reason for that will be explained in the second step.
Step 2 — Registering your component
As the created component is still unknown within your web app, you need to register it by initializing Vue. For this, I create a different file within my ‘/js’ folder called component-loader.ts, making it clear this file is meant for registering (thus loading) your components using Vue.
For example:
It is not necessary to use the option ‘components’ (passing an object containing all components that you want to register) as, without it, all of your components will be known within your web project instead of only the list that is passed. I prefer explicit naming as I sometimes create several instances for different kinds of components (eg. myFormComponents, myGalleryComponents etc.). As for the selector ‘#main’, this will be the semantic element (mostly a div) in which the component(s) will be loaded.
As of now the HTML-tag ‘vue-component’ can be used in your project.
You noticed I assigned the value of the instance to a new variable and that is because of the following (handy) feature… Let’s say you use the tag as follows:
The HTML-tag ‘vue-component’ (the given name when creating the component) is created with a name attribute (data property) and a reference-name to that component. With that reference, it’s now possible to use the variable to which you assigned the value of the instance, followed by $refs, followed by the ‘reference name’ , followed by a property that was configured when creating the component. Eg.
Step 3 — Bundling
As bundling is still mandatory to keep your scripting footprint as low as possible, you need to minify and bundle up the resulting JavaScript-files (transpiled from TypeScript). I added, in this case, the component- and the loader-file to the bundle and placed them at the bottom of the HTML-page, just below the reference to the third-party Vue library.
Step 4 — Git
To make sure the transpiled JavaScript-files won’t be added to your git-repository, add those files to a .gitignore file. The Javascript-files are better off being created by a CI/CD-build.
As a result, you now have a working Vue-component with scripting and HTML bundled into one file, leaving out only the styling bit which still goes into a dedicated CSS/SASS-file. Hopefully, this can be combined one day…
Another challenging feature was using i18n as most sources only talk about the plug-in, not an option, but that’s something for my next blog-post.
Thanks for reading!
Top comments (0)