Style Guide
Refactoring
- Refactoring Vue: Cleaning Up a List of Posts With Better Component Splitting and More ES6
- Clean up your Vue modules with ES6 Arrow Functions
- Examples of Vue’s Clean Code
- Optimizing Performance with Computed Properties
- Simplify Your Components with Computed Setters
- Learn how to refactor Vue.js Single File Components with a real-world example
Performance
- Vue.js App Performance Optimization: part 1 — Lazy loading and code splitting in Vue.js
- Vue.js App Performance Optimization: part 2 — Lazy loading of vue-router routes and common gotchas
- Vue.js App Performance Optimization: part 3 — Lazy loading of vue-router routes and common gotchas
- How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications
- Lazy Loading images with Vue.js directives and IntersectionObserver
State Management
Vuex
- Decouple Vuex modules with the Mediator pattern
- Vuex getters are great, but don’t overuse them
- Reusable Vuex Mutation Functions
- A pattern to handle ajax requests in Vuex
- [vuex Mutations] Single Changes vs. Single Responsibility
- Components and How They Interact in Vue and Vuex
- Why VueX Is The Perfect Interface Between Frontend and API
- Composing actions with Vuex
- How to Build Complex, Large-Scale Vue.js Apps With Vuex
- Should I Store This Data in Vuex?
- Anyway, this is how to use v-model with Vuex. Computed setter in action.
- 5 Vuex Plugins For Your Next VueJS Project
- Writing Vuex modules in neat Typescript classes
- Managing multiple central stores with Vuex
- Vuex Explained Visually
- Quick Intro to Vuex ORM
Mobx
Renderless Component
- Renderless Components in Vue.js
- Building Renderless Components to Handle CRUD Operations in Vue.js
- Building “Renderless” Vue Components
- Renderless or Bust! Why Renderless Component Libraries will Make Web Dev Easier and More Inclusive
- Vue.js Pattern for Async Requests: Using Renderless Components
Examples
Architecture
- Making a large scale app with vue.js (part 1): modularize your store!
- Making a large scale app with vue.js (part 2): a little bit of Object Oriented Programming.
- Is Vue.js Enterprise-Ready?—Large Scale Apps Use Cases
- How to avoid SOLID principles violations in Vue. JS application
Folder Structure
- How you can improve your workflow using the JavaScript console
- How to Structure a Vue.js Project
- Large-scale Vuex application structures
- Vue.js Application Structure and CSS Architecture
- Structuring Vue Components
- Structuring a Vue project — Authentication
Tips & Tricks
- How To Build Vue Components Like A Pro 😎
- Four tips for working with Vue.js
- Tips from a Lowly VueJS Developer
- Throttling and Debouncing Events with Vue.js and lodash
- Are partially applied functions in event handlers possible?
- Vue.js — Considerations and Tricks
- Six random issues and their solutions in VueJS.
- When VueJS Can't Help You
- Things that won’t work using Vue
- Tip#15 Delay execution with _.debounce
- Handling API calls in Vue
- Slide - Vue & REST API Patterns
- Type Vue without TypeScript
- Tracing or Debugging Vue.js Reactivity: The computed tree
- Fallback for Blocked Iframes: A (Crude) Solution with Vue.js
- Simplify Your Vue Components with Computed Setters
- Build Decoupled Vue.js Applications with Hooks
- How to Unlock the Full Potential of Prop Types in Vue
- One more example of abstract component in Vue.js
- A few handy Vue.js tricks
Router
- Navigation Guards - Official
- Vue Router Navigation Guards with Vuex
- Implementing a Simple Middleware with Vue Router
- Vue Router — The Missing Manual
- The lesser known amazing things VueRouter can do
- Storing and Using the Last Known Route in Vue
- Vue Route Component Hooks
Anti Patterns
- Chris Fritz - Vue.js Anti-Patterns (and How to Avoid Them)
- Common mistakes to avoid while working with Vue.js
- Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps
- [Video] - VueNYC - Three Vue code smells, and what you can do about them - Matt Rothenberg (@mattrothenberg)
- Why You Shouldn’t Use Vue.component
Videos / Audios
- 81: Evan You - Advanced Vue Component Design
- 7 Secret Patterns Vue Consultants Don’t Want You to Know
Repos
Paid
Typescript
- Vue + TypeScript: A Match Made in Your Code Editor
- Writing Class-Based Components with Vue.js and TypeScript
- Writing Vuex modules in neat Typescript classes
- Vue.js + Typescript best practices #1: How to create a modal service in Vue.js that is handling dialogs as a Promise to gain reusability of a modal components
- Vue.js + Typescript best practices #2: Using fully typed Vuex mutations with vuex-typescript
- Vue.js + Typescript best practices #3: Create a custom hook component like mounted or created
- Vue.js + Typescript best practices #4: create better $emit()
- Vue.js + Typescript best practices #5: Class-based fetching with Axios using DTO architecture
GraphQL
Test
- Testing Vuex Actions Correctly with Jest
- How to Use Mock Data in Vue Apps
- Mocking global objects in vue test utils
- Testing real world VueJs apps
- Unit Testing Vue-Router
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 1
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 2
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 3
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 4
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 5
- How to Use Mock Data in Vue Apps
Misc
- Creating an Interpose Vue component from a React implementation
- Composing computed properties in Vue.js
- 4 AJAX Patterns For Vue.js Apps
- 3 Code Splitting Patterns For VueJS and Webpack
- The easiest way to improve your Vue.js application. Part 1
- Using JSX with Vue and Why You Should Care
- Compound components
- Creating Multi-root Vue.js Components
- Understanding Vue.js Reactivity in Depth with Object.defineProperty()
- Templating in Vue: Separation of Concerns or Separation of Technology or something else?
- Stashing Vue components data
- Creating Reusable Transitions in Vue
- vue-advanced-workshop
- Do it with Elegance: How to Create Data-Driven User Interfaces in Vue
- Creating Vue.js Component Instances Programmatically
- Managing User Permissions in a Vue.js App
- Render Functional Components in Vue.js
- Looping through Object Properties
- Cancelling async operations in Vue.js
- Scoped styles with v-html
- Pagination With Vuejs
- What does the ‘h’ stand for in Vue’s render method?
- How To Build Vue Components That Play Nice
- Making responsive Vue components with ResizeObserver
- An imperative guide to forms in Vue.js
- Vue.js: the good, the meh, and the ugly
- Dynamic Vue.js Layout Components
- Advanced Vue.js concepts: mixins, custom directives, filters, transitions, and state management
- Introducing the Single Element Pattern
- Control DOM Outside Your Vue.js App with portal-vue
- Add i18n and manage translations of a Vue.js powered website
- Managing Complex Waiting Experiences on Web UIs
- Vue.js — Forms, components and considerations
- Reusing Logic in Vue Components
- Recursion for Nested, Tree-Structure Components in Vue
- Checklist for Writing Highly Reusable Components in React and Vue
- Build a Vue.js SEO-Friendly SPA with Prerender & Other Tips
- Vue.js (and Vuex) bug squasher cheatsheet
- Universal application code structure in Nuxt.js
- 7 Frontend Architecture Lessons From Nuxt.js
- What’s the deal with functional components in Vue.js?
- Vue API calls in a smart way
- How to create a Vue.js app using Single-File Components, without the CLI.
- A Vue pattern for idiomatic, performant component registration you might not know about
- Reacting to Promises from event listeners in Vue.js
- Vue.js Single File Component Factory
- Composing Components in Vue.js
- What to do when Vue hydration fails
- 7 Vue Patterns That You Should Be Using More Often
- Vue Enterprise Patterns - How to Build Components With Design System Variants And Share Variant Styles Using Variant Style Provider