はてなブックマーク

Lazy loading components is a easy way to improve the user experience of your app especially if your code bundle is big or if users are on slow connections. Vue 3 has introduced several new features to help you achieve this easily and with great UX through the improvements to the async component API and the new Suspense component. Why lazy load components?Some parts of your UI don't need to be load

Anthony Gore | March 16th, 2020 (Updated May 9th, 2020) | 9 min read Vue 3 has not been officially released yet, but the maintainers have released beta versions for us punters to try and provide feedback on. If you're wondering what the key features and main changes of Vue 3 are, I'll highlight them in this article by walking you through the creation of a simple app using Vue 3 beta 9. I'm going t

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 pro

Can A Vue Template Have Multiple Root Nodes (Fragments)? If you try to create a Vue template without a root node, such as this: <template> <div>Node 1</div> <div>Node 2</div> </template> You'll get a compilation and/or runtime error, as templates must have a single root element. Typically, you'll fix this problem by adding a "wrapper" div as a parent. This wrapper element has no display purpose, i

Very few people write Vue components originally intending them to be open-sourced. Most of us start out writing components for ourselves - we have a problem, and then decide to solve it by building a component. Sometimes we find ourselves wanting to solve the same problem in new locations in our codebase, and so we take our component and refactor it a bit to make it reusable. Then we want to use i

Are web components "the future" for the web platform? There are many opinions both for and against. What is a fact, though, is that browser support is emerging for web components and there are a growing number of tools and resources for authors interested in creating and publishing web components of their own. A great tool for creating web components is Vue.js, and it's been made even easier with

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. It makes sense to work with what you already know and enjoy. That said, each backend has its own strengths and weaknesses, and certain project requiremen

Transitions in Vue.js are really great. There is no doubt that they can bring your app to life very easily but often you have to write them from scratch in each project or even bring some CSS library like animate.css to make them look good. What if we could encapsulate these into components and simply reuse them across several projects? We will look at several ways to define transitions and dig ou

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

Anthony Gore | March 5th, 2017 (Updated May 18th, 2020) | 7 min read One of the features of Vue that first hooked me and many other developers is its reactivity system. It's not just the ease in which it allows you to build dynamic UIs, but the fact that it just works without you having to think about it or even understand it. If you want to become a more advanced Vue developer, however, and espec

Server-side rendering (SSR) is a design concept for full-stack web apps that provides a rendered page to the browser. The idea is that the page can be shown while the user waits for scripts to be downloaded and run. If you aren't using a Node.js server for your app then you're out of luck; only a Javascript server can render a Javascript app. However, there are alternative to SSR that may be good

Anthony Gore | August 28th, 2017 (Updated January 20th, 2020) | 8 min read If you ask two Vue.js developers "what's the best way to implement AJAX in a Vue app?", you'll get three different opinions. Vue is a UI library and therefore doesn't provide an official way of implementing AJAX. There are a number of different approaches that may be used effectively, each with its pros and cons that should

Server-side rendering is 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 b

Build A Lazy-Load Router With Vue.js And The Latest Browser Features Dynamic module importing is one of the latest JavaScript features to hit the major browsers. The main use case for this feature is lazy-loading modules to allow content to be delivered when it is needed, rather than all at once. In this article, I'll demonstrate how you can build a lazy-load router with Vue.js in just a few lines

There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it's really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined. In this article, I will show you five feature that you can easily add to your

Build A Real-Time Chat App With VueJS, Vuex & Cloud Firestore Last week Google's Firebase platform released a new product, Cloud Firestore. Much like the Firebase real-time database, it is a NoSQL-based cloud database that can be used to build real-time applications. It addresses some of the problems Firebase has, like writing complex queries. You can read more about its features here. In this pos

It's a common practice for a Vue app to use the DOM as its template, as it's the quickest and easiest architecture to set up. This practice comes with a few catches, however, that make it an undesirable choice for any serious project. For example, the markup you write for a DOM template is not always what you get when your app runs. In this article, I'll explain the issues with using the DOM as a

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

Anthony Gore | March 24th, 2017 (Updated February 3rd, 2020) | 5 min read There are plenty of choices when it comes to defining component templates in Vue. By my count, there are at least seven different ways! In this article, we'll go through examples of each and address the pros and cons so you know which one is the best to use in any particular situation. Plain stringsThe quickest and easiest w

Vue.js 2.4.0 has been released this week with an abundance of new features, fixes and optimisations. In this article, I'll give you a breakdown of four new features that I think are the most interesting: Server-side rendering async componentsInheriting attributes in wrapper componentsAsync component support For Webpack 3Preserving HTML comments in components1. Server-Side Rendering Async Component

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS "Eliminate render-blocking JavaScript and CSS". It's the one Google Page Speed Insights suggestion that I always get stuck with. When a web page is accessed, Google wants it to only load what's useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible. There are

Code splitting a single page app is a great way to improve its initial loading speed. Since a user doesn't have to download all the code in one hit, they'll be able to see and interact with the page sooner. This will improve UX, especially on mobile, and it's a win for SEO, as Google penalises slow loading sites. Last week I wrote about how to code split a Vue.js app with Webpack. Long story short

Webpack is an essential tool for developing Vue.js single page applications. It makes your development workflow much simpler by managing complex build steps and can optimise your apps size and performance. In this article I'll explain four ways that Webpack can enhance your Vue app, including: Single file componentsOptimising the Vue buildBrowser cache managementCode splittingWhat about vue-cli?If

Vue.js pre-rendering exampleLet's do a simple example of pre-rendering a Vue.js app, once in a Node.js environment and once in a Laravel environment. In these examples we'll use Webpack with the prerender-spa-plugin to perform the pre-render. Vue and NodeStep 1: Project installationWe'll use vue-cli with the webpack-simple template. $ vue init webpack-simple vue-node-pr-test $ cd vue-node-pr-test

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. I'll focus on the differences in this article so you're ready to jump into Vue and be productive st

It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. But you're probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won't have time to rewrite for Vue. If you're careful about how you do it, you can use jQuery and Vue together safely.

If you want to build a web page with JavaScript, VueJS can do one helluva job on it. But there's a condition: it only works on parts of the page where it has unhampered control. Any part that might be interfered with by other scripts or plugins is a no-go for Vue. This means the head and body tags are Vue-free zones. It's a real bummer if you wanted Vue to manage a class on the body, to take one e