Patterns for Large Scale Vue.js Applications

Rate this content
Bookmark

What is the best way to structure a Vue.js application so that it can scale to meet all your users' needs ? There are multiple patterns established the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Daniel Kelly has been with Vue School for about six months.

The key to building a maintainable and scalable Vue.js application is predictability.

Daniel Kelly is a teacher at Vue School and a former full stack developer with experience in PHP (Laravel) and JavaScript (Vue.js).

Predictability is important because it helps developers quickly locate the code responsible for a feature or bug, reducing headaches and frustration, and saving time.

No, a code base cannot be 100% predictable. There will always be some need for digging and searching within the code.

The four sources of standards in the Vue.js community are the Vue.js Style Guide, the scaffolding generated by Vue CLI, official Vue.js libraries, and popular component frameworks like Vuetify, Quasar, and Bootstrap Vue.

The Vue.js Style Guide recommends using dedicated single-file components, naming components in Pascal case, prefixing base components with 'app' or 'base', using multi-word names, prefixing single-instance components with 'the', and tightly coupling child components with their parent components.

Using existing solutions like VueRouter or VueX provides built-in tests, great documentation, and shared standards that make onboarding new developers easier.

A recommended standard is to use a flat component directory or an almost flat component structure, where page-specific components are stored in a 'partials' directory within their respective page directories.

Wrapping third-party libraries in components allows for easier switching of underlying libraries, extends functionality, and provides a consistent interface for the rest of the code base.

Daniel Kelly
Daniel Kelly
25 min
21 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Standards are crucial for achieving predictability and maintainability in a code base. The Vue.js community provides several sources of standards, including the Vue.js Style Guide and official libraries. Personal and team-wide standards can complement community-wide ones. Alternative component structures, like an almost flat structure, can work well for large apps. Adopting a standardized route naming convention can make routes more predictable. Miscellaneous tips include wrapping third-party libraries, creating SDKs for APIs, and auto-registering components globally. Thorough testing is important, and Vue School offers various services and courses for becoming an expert in Vue.js.

1. Introduction

Short description:

Hi, y'all. I'm Daniel Kelly, a teacher with Vue School. I've worked as a full stack developer with technologies like PHP in Laravel and JavaScript in Vue. I'm excited to share some tips and tricks with you today.

Hi, y'all. I'm really excited to be with you today and get to share a few things, a few tips, and tricks that I've picked up during my time as a developer. My name is Daniel Kelly, and I'm a teacher with Vue School. I've actually only been with Vue School for about six months now, but ever since I joined the team, I've really enjoyed the opportunity to get to contribute back to the Vue community that has really given me so much throughout my development career. Before I joined on at Vue School, I was a full stack developer, and I've worked with a number of technologies over the years such as PHP in Laravel and, of course, JavaScript in Vue. When I'm not coding, I spend my time as a husband and a father, and to be honest, I don't know what I wrestle with more, my children or my code. When you have three, there's a lot of that that goes on.

2. Achieving Predictability with Standards

Short description:

When it comes to building a scalable project, predictability is key. You want to be able to easily locate and address feature requests or bug reports in the code. Predictability also means knowing what tools and data are available at each location. Having a predictable code base is important because it eliminates confusion and saves time. While a code base can't be completely predictable or understood as a whole, predictability is about being able to focus on one piece at a time. Standards are the key to achieving predictability in a code base.

Anyways, that's enough about me. Let's get to what you really came here to hear about today. And that is what is the best way to structure a Vue.js application so that it is maintainable and scalable the more it grows?

Well, if I may be so bold, I'm going to try to answer that often asked question with a single word. And here it is, predictability. When it comes to building a scalable project, you want everything about it to be as absolutely predictable as possible. What does that mean on a practical level, though? Well, to me it's about the ability to go from a feature request or a bug report to the exact location or maybe a few multiple locations in the code where said feature or bug report can be addressed. Not only that, I think it's the ability to know what tools and what data you have access to at that location in the code.

Now, why is this important? Why is it important that we have predictable code bases? Well, if you're anything like me you've definitely felt like this before. You've opened up the code base in your editor, and you've been assigned a task and you think I don't even know where to start. I'm lost. I have no idea what I'm doing and yeah, I think we've all been there. Maybe it's because we're new to the team. Maybe it's because we're new to a project and maybe that's a little bit more understandable. But maybe it's even a project we've been working on for quite a while, and we just don't even know where to start. Well, that's the goal of a predictable code base is to alleviate this experience as much as humanly possible and with it is going to get rid of a lot of headaches and is going to eliminate a lot of frustration and get you up get back for you a lot of your time.

Now real quick. Let's let's just take a look at what I'm not saying. First of all, I'm not saying that your code base can be a hundred percent predictable. I'm not saying you won't ever have to do any digging to kind of find what you're looking for, right? That's simply not possible. I'm also not saying that your code base can be a hundred percent understood as a whole. In fact, most applications or at least a lot of very large applications are just simply too complex to be able to hold the whole thing in your head at one time. And therefore a code base being predictable isn't necessarily about being able to understand the whole thing at one time. To me predictability is really more about being able to predict where a certain piece in that code base fits in and really be able to only focus on that one piece at a time without having to think about the rest. In fact, I think that's a measure of a really good code base.

Alright. So how do we accomplish predictability? That's the question. Isn't it? Well, once again, if I may be so bold, I'm going to try to answer it in a single word. That word is standards. Why standards? Well, because really, this is how you make anything predictable, right? I can know with a pretty much 100 percent surety that when I go to change the sheets on my son's bed tonight, that the sheets I get out of the closet will fit because there is a standard sizing system and it's just made that way with a standard. Now I may be I may get the wrong size sheets out of the closet for my bed instead of his, but we've been there.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.