After few months of frustration with trying to use the "de-facto" internationalization library for Vue.js - vue-i18n, I've decided it is time to replace it. And that is why I have created fluent-vue - a Vue.js internationalization plugin that uses Mozilla's Fluent syntax to allow for natural-sounding translations.
In this post, I try to explain what problems I have encountered when trying to use vue-i18n library in my app, and how Fluent syntax solves them.
JavaScript is a multi-paradigm language. It supports event-driven, functional, and imperative, including object-oriented and prototype-based, programming styles. JavaScript was initially used only for client side. These days JavaScript is used as a server-side programming language as well. To summarize in just one simple sentence — JavaScript is the language of the web.
Implementation a web UI is faced with more and more complex tasks that require the use of more and more complex tools. The trend of leaving the MVC application architecture, as well as the desire of developers to use separate libraries for each layer of tasks, led to changes, against which the Vue.JS framework appeared and became popular. Let's try to understand why Vue.JS appeared and what problems it carefully solves.
I am a full-stack developer at Syncrasy Tech (IT solutions company). I love writing React codes. But why I am telling you this as we are here to discuss the Vue.js best practices for web development. I am telling you this so that you can understand my background and why I’m discussing here the Vue.js.
I love working on React codes, but I hate reading them. This is the reason where I fail to code. Even with the best code review practices, I can’t figure out the nesting of React components that simply helps to create more complex UI structures in web apps.
The solution to this problem is Vue that is now not so new in the block of web app development. I have heard a lot about Vue async components, server-side rendering, tools, and libraries. Perhaps you find this myriad of terms to be confusing. Believe me, you’re not alone in that, many developers of all levels feel the same way when they don’t know the Vue best practices.
A few days later, I finally decided to get my codes into it. What I am sharing here are the numerous best practices that I have learned through my experience with Vue. I’m ready to share what I’d find.
inb4: This is not another "setting up" a new project with Vue and TypeScript tutorial. Let's do some deep dive into more complex topics!
typescript is awesome. Vue is awesome. No doubt, that a lot of people try to bundle them together. But, due to different reasons, it is hard to really type your Vue app. Let's find out what are the problems and what can be done to solve them (or at least minimize the impact).
Vue mixins are the recommended way of sharing common functionality between components. They are perfectly fine until you use more than one for them. That's because they are implicit by design and pollute your component's context. Let's try to fix this by giving them as much explicitness as we can.
(originally published on Medium)
I like writing React code. This might be an odd introduction to a story about Vue, but you need to understand my background to understand why I’m here discussing Vue.
I like writing React code and I hate reading it. JSX is a neat idea for assembling the pieces together fast, Material-UI is amazing solution for bootstrapping your next startup’s UI, computing CSS from JS constants allows you to be very flexible. Yet reading your old JSXs feels awful – even with scrupulous code review practices you might scratch your head not once as you try to figure the intricate nesting of the components.
I’ve heard many things about Vue—the not so new kid on the block—and I finally decided to get my feet wet; bringing in all my mental luggage of React and Polymer (and Angular, but let’s not talk about that).
