Micro Vue Apps

My kids love sprinkles.  On ice cream, on doughnuts... you name it.  If sprinkles are an option, they would like some!

Myself?  No sprinkles.  Ever.

Unless we are talking about "Javascript sprinkles"; there are times when building a web site where I want to sprinkle just a bit of dynamic behavior on a page.  This has done with Javascript for years and is nothing new (in the old days this was called DHTML for Dynamic HTML).

Frequently a tool like jQuery, the canonical Javascript library for DOM manipulation is used for this.  However, recently I have been been turning to Vue.js for this purpose, even when just adding Javascript "sprinkles" to a web page.

Traditionally, Vue is used for building full blown applications, but because of its simplicity and its focus on the view layer, it is a very natural choice for even "micro apps" that just add a bit of dynamic behavior to a single page.

Here are a few times I've created Vue Micro Apps and why I find this to be a good idea.

On Page Chat App


In the Rails application I built to drive this course I wanted a way for visitors and users to chat with my team and me directly.  We typically use Intercom for this, but it can get expensive, especially if you need it on several sites.  So we built a very simple version to use on this site.

For this use case we needed to be able to display a few chat messages in a container and send messages.  Creating a very simple Vue.js app for this made it very simple to implement.

Here is the skeleton of the chat app:


<div id="microapp">
    <!-- display messages and text area for new chat message here -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#microapp',
        data: {
            showBotMessage: false,
            chatOpen: false,
            messages: [],
            message: ''
        },

        mounted() {

            setTimeout(() => {
                this.showBotMessage = true
            }, 3000)

        }
    })
</script>

With this "app" in place, it is easy update the HMTL for displaying messages or for handling a click event for sending a new message.