tag: Vuejs

VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser. Refreshing the browser will reset state. The typical state stored with Vuex is dissolved and may take the auth./login info with it if you have designed auth. in such a way. This is not a good experience for anyone. ...

In a previous post, we saw the power of bindings in Vue. v-model is a powerful way to bind variables and UI rendering in Vue. Let us look at a bit more of v-model in this post. Remind me what is v-model about? In its simplest form.. <input type="text" v-model="myName" label="Your name:"> .. and it doesn’t quite get more complicated than that on its own. When you change ‘myName’ manually, through another component, or from the back-end, the variable value changes for sure but will also trigger off a change to UI. The user will see near instantaneous change to a specific UI element without any page refresh. ...

The power of Vue is in making reactive components child’s play. Well, that is true if the child in question is a 8-year old nephew who knows the basics of Javascript - you know what I mean. Consider an example that I have used before - <template> <div class="hello"> <h1>{{ msg }}</h1> <p> <button @click="sayHello">Hello</button> <span v-if="showHello">&nbsp;World!</span> </p> <p> <input type="text" v-model="myName" label="Your name:" /> </p> <p v-if="myName">Hello to you too.. {{ myName }}</p> </div> </template> <script> export default { name: "HelloWorld", data() { return { myName: null, showHello: false, }; }, methods: { sayHello() { console.log("hello world"); this.showHello = !this.showHello; }, }, props: { msg: String, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } a { color: #42b983; } </style> ‘HelloWorld’ is a typical Vue component. ...

Vue provides what are called ‘Single File Components’ (SFC) that make the development process easier. Completely new to Vue? Head over to another post and get to know Vue. One of the big advantages of Vue is the fact that it can be deployed in multiple ways in your app. You can link Vue CDN link and just start using it for simple purposes, or use the full scale development environment setup by Vue CLI. ...

The advise that has been belted out fairly often for budding front-end developers - Learn HTML Learn the fundamentals of Javascript Push yourself through styling Know how to create APIs - REST, GraphQL Go deep with design patterns, test automation, build tools, and so on I beg to differ. I knew “some” knowledge of HTML and had played around with basic Javascript, and jQuery - but did not find super important to start at the very beginning and work all the way up. So, provided below is what I think can put one on a faster path to developing web applications. I am focusing on Vue as the goal since I am of the firm opinion that Vue needs to be learnt by all JS developers. ...

Ok, I admit. Amongst the tens of frameworks that I have used and hundreds that I said ‘hello’ in, I have come to love Vue more than I would like to admit. Vue has made my life easier. IMO a beginner to Javascript (but who is experienced with programming) should pick up Vue over anything else that exists today. Why pick up Vue? Three tenets from my view of Vue - Simplicity: Easy to understand, learn and implement Performant: Small footprint; fast; can scale! Earned a place in the hearts of zillion developers: Easy to get your questions answered and learn from others You can get to building applications by just including Vue from CDN, or automatically setting up the environment through the award-winning CLI (it certainly has my award :)). ...

I have been associated with the development of a couple of data-driven applications. One of the common requirements is for a few fields to have a ‘rich text’ control. Rich text allows the user to - Format text - paragraphs, colours, font-types etc. Include media like images and videos Rich text fields also find usage in report design (a story for another day). While you can create custom components on top of something like v-text-field to support rich text editing, why do that when there are ready components? ...