Vuex. Is it pronounced “vewks,” or “veweks”? Or maybe it’s meant to be “vew,” pronounced with a French-style silent “x”?
My trouble with understanding Vuex only began with the name.
What Is Vuex? A Beginner’s Guide To Vue’s Application Data Store
Switching From React to Vue.js
So you're a React developer and you've decided to try out Vue.js. Welcome to the party!
React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular's influence on Vue.
4 Things Vue.js Got Right
Whether you’re suffering from Javascript fatigue, ES anxiety, post-webpack stress disorder or any other kind of web development malady, the last thing you probably want to do now is look at another Javascript framework.
But the focus, simplicity, and flexibility of Vue.js might just make it the hero you need. Coming a bit late to the game in 2014, Vue has had the advantage of being able to pick and choose from the best parts of its predecessors.
Code Splitting With Vue.js and Webpack
One possible downside to bundling your single page app with Webpack is that you can end up with a really big bundle file, sometimes several megabytes in size!
Vue.js Single-File JavaScript Components in the Browser
Browser support for native JavaScript modules is finally happening. The latest versions of Safari and Chrome support them, Firefox and Edge will soon too.
One of the cool things about JavaScript modules for Vue.js users is that they allow you to organize your components into their own files without any kind of build step required.
How to Publish Your Vue.js Component on NPM
You've made an awesome component with Vue.js that you think other developers could use in their projects. How can you share it with them?
In this article, I'll show you how to prepare your component so that it can be packaged and published on NPM. I'll use an example project and demonstrate the following:
Avoid This Common Anti-Pattern in Full-Stack Vue/Laravel Apps
If you want your Vue.js single-page app to communicate with a Laravel backend, you will, quite reasonably, think of using AJAX. Indeed, Laravel comes with the Axios library loaded in by default.
However, it's not advisable to use AJAX to retrieve application state on the initial page load, as it requires an extra round-trip to the server that will delay your Vue app from rendering.
Vue.js + Brunch: The Webpack Alternative You’ve Been Hungry For
Imagine if there was a build tool that you could use for Vue.js projects that compiled faster than Webpack, gave you a smaller bundle size, and required only a few lines of configuration.
Brunch is that tool. In this article, I'll show you how incredibly easy it is to set up a Vue.js + Brunch project, cover some of the pros and cons of Brunch, and serve up a few tasty brunch puns on the way.
Migrating a Vue.js App to Vuex
One of the difficult things about getting started with Vuex is that it is not so much a library as it is a design pattern. It follows that implementing Vuex is not so much about using an API, as it is about structuring your code to comply with the pattern. If you're new to Vuex, this will be daunting.
In this article, I'll demonstrate how to get started migrating Vuex into an existing Vue.js project. I'll show you how to identify the parts of your app's state that belong in Vuex, and those that don't, how to refactor your component functions into mutations, actions and so on, and finally we'll discuss the benefits accrued.
4 AJAX Patterns for Vue.js Apps
If you ask two Vue.js developers "what's the best way to use AJAX in an app?" you'll get three different opinions.
Vue doesn't provide an official way of implementing AJAX, and there are a number of different design patterns that may be used effectively. Each comes with its own pros and cons and should be judged based on the requirements. You may even use several simultaneously!
Using JSX With Vue.js
Love it or hate it, JSX is a popular extension to JavaScript that allows XML tokens in your scripts.
If you want to create templates in your script files and you find Vue's render() function to be difficult to work with, JSX may be just what you need.
Create a Vuex Undo/Redo Plugin for Vue.js
There are many benefits to centralizing your application state in a Vuex store. One benefit is that all transaction are recorded. This allows for handy features like time-travel debugging where you can jump between previous states to isolate problems.
In this article, I'll demonstrate how to create an undo/redo feature with Vuex, which works in a similar way to time-travel debugging. This feature could be used in a variety of scenarios from complex forms to browser-based games.
Getting Your Head Around Vue.js Scoped Slots
Scoped slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they're difficult to understand! Trying to get your head around the interweaving of parent and child scopes is like solving a tough math equation.
A good approach when you can't understand something easily is to try put it to use in solving a problem. In this article, I'll demonstrate how I used scoped slots to build a reusable list component.
Server-Side Rendering With Laravel and Vue.js 2.5
Server-side rendering is a great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn't get populated until JavaScript runs.
One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby, etc.
In this tutorial, I'll take you through the setup steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on GitHub.
How JSON Web Token (JWT) Secures Your API
You've probably heard that JSON Web Token (JWT) is the current state-of-the-art technology for securing APIs.
Like most security topics, it's important to understand how it works (at least, somewhat) if you're planning to use it. The problem is that most explanations of JWT are technical and headache inducing.
7 Vue.js Backends Compared
Which backend are you planning to use for your next Vue.js project?
Often developers choose what they're familiar with. If you're primarily a Laravel developer, for example, I'll bet Laravel will be first to your mind when planning a new project.
5 Awesome Boilerplates/Templates for Vue.js Projects
Are you about to begin an important Vue project? To ensure you start with a solid foundation, you might use a template (aka boilerplate, skeleton, starter, or scaffold) rather than starting from npm init or vue init.
Many experienced developers have captured their wisdom about building high-quality Vue apps in the form of open source templates. These templates include optimal configuration and project structure, the best third-party tools, and other development best practices.
Is My Single-Page Application SEO Friendly?
A notoriously murky area of single-page application (SPA) development is SEO. Depending on who you ask, search engine crawling of client-rendered content is either totally fine, fine as long as it's synchronous or not at all fine.
Due to the confusion caused by all this conflicting advice, I regularly see the question "is my Vue SPA okay for SEO?" come up in places like the Vue.js Developers Facebook group, the Vue.js Forums, and r/vuejs on Reddit.