Stories
Tagged with Vue
Hosting Vue in ASP.NET Core: A Different Take
In the several years that I've been developing and teaching Vue, I've tried a lot of different ways to make ASP.NET Core and Vue play nice with each other. One of the strategies that I've seen employed (especially with Angular and React) is the Spa Framework Extensions out of Microsoft. Because Vue didn't work out of the box (or have a template) I dismissed this approach for a long time. Now that the platform has matured and there is an open source extension for Vue,
I thought I'd revisit it. Though I still think it's not exactly the right approach. Let's see why.
Originally, I thought the fix was to just deal with it separately. That meant opening it in VS Code or just using the command-line to run the project. I wanted something more integrated and I think I found a solution I don't mind.
Vue 3 and Validation with the Class-Validator
I've been working with Vue 3 Beta and RC (currently in RC5) and early on I needed some validation but the Vue stalwards of vuelidate and vee-validate weren't working with the Composition API early on. What was I do to?
After some searching I ran into class-validator library. It got me thinking about how to separate the validation from the UI like I usually do in the server.
I thought I'd run you though a little example. If you want to take a look at the project, I have an example on GitHub with tags for before and after:
A Month with Vue 3
In my spare time, I've been working on a micro-services example to try and make a minimum viable micro-service using ASP.NET Core. To make things that much harder, I've also decided to use Vue 3 for the front end. In for a penny, in for a pound.
After spending the last month with Vue 3 (or so), I've come away with some opinions that I thought I'd share. Some of these are because of the lack of support for Vue 3 for some of the common libraries I used, but in many ways it's a love letter to some of the features I really love. Her we go...
Developing on a Beta can be difficult. Lots of time there are inconsistencies between different versions of packages that are in different states. I haven't found this to be a particular problem with the Vue ecosystem.
Did Vue.js Just Blink?
There is a lot of buzz around the internet about Vue.js 3.0's announcement about a new composition model. There are a lot of questions about it and I think much of it is 'they moved my cheese' more than 'they're breaking everything'.
So let's talk about it...
Evan You's announcement in London last week scared a bunch of people, including me.
Should I Be Using the ASP.NET Core SPA Templates?
I've been writing demos for Vue, Angular, and React for my SignalR micro-courses over on my Wilder Minds site. For Angular and React, I started out with the the SPA templates, but I found them confusing and hard to do a minimal example.
I tend to suffer from "You Moved My Cheese" and wondered if I was throwing the baby out with the bathwater. Let me talk about my experiences creating projects with and without the templates.
My initial problem with the templates is that they are using node under the covers to handle the build of the project. I hate that these details are hidden from me, but I'm confortable with having a console window to keep a watch on my webpack-based projects (the Vue CLI, Angular CLI and React CLI all wrap webpack).
Vuex and Asynchronicity
If you're using Vuex for state management in your Vue.js applications, there is a good chance that you need to use async operations (e.g. API calls). I have been doing this a while, but falling back to using Promises in most cases.
As I've been using async/await in C# for a while and wanted to try out async and await in JavaScript. In implementing the change, I thought I'd share how I did this in a simple Vue app.
To start out, I have a little demo project where I'm making some API calls directly in Vuex via actions:
Vue's Single File Components vs. React's JSX
I have to admit, my first experiences with React several years ago were meet with a lot of cynicism. The idea of mixing JavaScript and Markup made me clutch my pearls to the core.
Now I know that you can use React without using JSX, but I think that is missing the point in a lot of ways. Of course, I'm not a React expert so I am sure you'll let me know how wrong I am ; )
In case you haven't used React yet, let me just talk about how JSX works. In React, when you build a component, you're mixing JavaScript with markup. The idea is that during compilation, the markup is replaced with DOM code to build up the markup you're specifying. For example:
Using Vue CLI Inside an ASP.NET Core Project
As many of my readers already know, I've become enamoured with Vue.js. Because of this, I've been using it more and more on projects.
Since I also deal with ASP.NET Core almost exclusively, I've been at odds with how to get the two technologies to work well together. Originally I had just used the JavaScript file, but as I've started building larger pieces, I've wanted to use projects built by the Vue CLI in ASP.NET Core. Here's how I've been doing it. Might not be right, but it's at least a way ; )
I'm going to assume you have used the Vue CLI and ASP.NET Core before. So I'm skipping a lot of steps like creating the ASP.NET Core project. I'm also going to assume you've opened up a console before and ran commands. Lastly, I'm assuming you're using Visual Studio (though shouldn't be much different if you're not), and that you have the Vue CLI installed.
Creating a Vuex Plugin
If you're building larger scale Vue objects and you're not using Vuex to centralize your state, please stop and go learn Vuex. Really.
For those of you still here, sometimes it's helpful to be able to monitor state changes to perform other tasks. For example, to send messages or communicate with servers that aren't about state (e.g. SignalR is a good example). That's where Vuex plugins come in.
A Vuex plugin is a simple function that is called once during the setup of a Vuex store. Typically you'd just create the function/arrow function taking an instance of the store:
export default store => {
};
Inside the function, you just want to subscribe to changes to the store as you need. An easy way to think about this is to use subscribe to a mutation:
export default store => {
store.subscribe((mutation, state) => {
if (mutation.type === "setError") {
// Alert someone
alert("Error occurred!");
}
});
};
The mutation that is passed in has a "type" and a "payload". With these properties of the mutation you can determine what to do. For example, the above example just pops up an alert (a really bad thing to do btw) when setError mutation is called. setError is a mutation in a store:
Talking Vue with .NET Zuid
If you're not in the south part of the Netherlands, you might have missed my most recent appearance last night. Great hosts, guests and sponsors make the night and easy and fun talk.
After a long day at Techorama NL, I was whisked away to Eindhoven for a talk at the .NET Zuid group (e.g. Southern .NET Group). I was able to show them the basics of Vue.js and pontificate about my continued hatred of the phrase "Single Page Applications".
As promised, I wanted to make the slides and code available to the attendees. You can get them here:
Techorama Netherlands Wrap Up
Finally heading home from about a month of conferences! I can't wait to get back to my own bed, but in the mean time I've had a great time sharing talks with a lot of European developers!
This time I was in Ede, Netherlands for the first Techorama outside of Belgium. As usual, the team did an amazing job! Here are the slides and code as promised from that event:
Thanks for asking great questions and attending the sessions!
Music City Code 2018
Just got home from Music City Code conference had a great time catching up with attendees and other speakers. If you haven't made it to this great Nashville event before, plan for next year. It's well worth it.
As promised, here are the slides and code from my talks. I did talks on "Enhancing Web Pages with VueJS: When You Don't Need a full SPA" and "Versioning APIs with ASP.NET Core 2.1". Here you go:
Vue and ASP.NET Core - A New Course
In case you haven't been following on Twitter, you might not know that I've been working on a Vue course for a couple of months now. This particular course is now available as an Early Access model I'm trying out.
Instead of waiting and releasing the whole course, I'm publishing the course module-by-module. The idea is that Early Access gives you access to each module as I finish them.
This course is my first try at this. Because Early Access means students will be something like the Beta testers for the course, I can release the course at a discount. So far I've been able to release the first six modules and I'm pretty happy with how the course is coming along.