@danielkelly_io

@danielkellyio

Alabama, USA

Daniel Kelly

Teacher @ Vue School

Full Stack developer (10 years)

Husband and Father

Large Scale

Patterns for

Vue.js Applications

What is the best way to structure a Vue.js application?

Predictability:

Standards are Key

1

Predictability:

Standards are Key

1

The Vue.js Style Guide

https://vuejs.org/style-guide/

Component Standards

  • SFCs should be PascalCase
  • Prefix base components
    • App
    • Base
  • Multi-Worded names

app-popup.vue

Predictability:

Standards are Key

1

Component Standards

  • Prefix Single instance components
    • The
  • Prefix tightly coupled child components
    • TodoList and TodoListItem
  • Begin with the most general
  • And end with the most specific

Predictability:

Standards are Key

1

The Officially Recommended Tooling

Predictability:

Standards are Key

1

The Most Popular UI Frameworks

Predictability:

Standards are Key

1

Predictability:

Standards are Key

1

Take Full Advantage of Your IDE

2

Volar

VS Code Extension

Take Full Advantage of your IDE

2

Official ESLint Plugin

⇾https://eslint.vuejs.org/

Take Full Advantage of your IDE

2

Official ESLint Plugin

⇾https://eslint.vuejs.org/

Take Full Advantage of your IDE

2

Take Full Advantage of your IDE

2

Official ESLint Plugin

⇾https://eslint.vuejs.org/

Official ESLint Plugin

⇾https://eslint.vuejs.org/

Take Full Advantage of your IDE

2

Formatting

Take Full Advantage of your IDE

2

Formatting

Take Full Advantage of your IDE

2

Take Full Advantage of your IDE

2

vueschool.io/courses/visual-studio-code-for-vue-js-developers

  • Vue Snippets
  • Working with Git
  • and more!

TypeScript

Take Full Advantage of your IDE

2

TypeScript

Take Full Advantage of your IDE

2

  • Prevent errors as you develop
  • Makes refactors less risky and stressful
  • Gives autocomplete superpowers

Take Full Advantage of your IDE

2

vueschool.io/courses/typescript-with-vue-js-3

  • typing component props
  • typing component events
  • typing template refs
  • and more!

TypeScript

Take Full Advantage of your IDE

2

Let's take a look at a few examples

Typing Props & Events

Take Full Advantage of your IDE

2

Nuxt 3 Supports TypeScript by Default

Take Full Advantage of your IDE

2

Nuxt even generates some types on the fly

File Structure

3

File Structure

3

File Structure

3

Nuxt 3 provides great community wide conventions

File Structure

3

File Structure

3

  • components are auto imported
  • composables are auto imported
  • plugins are auto registered
  • pages are turned into routes

Nuxt 3 provides great community wide conventions

Route Naming Convention

4

File Structure

3

Route Naming Convention

4

Inspired by Laravel

File Structure

3

Route Naming Convention

4

What it might look like in Nuxt

File Structure

3

Route Naming Convention

4

What it might look like in Nuxt

File Structure

3

Route Naming Convention

4

What it might look like in Nuxt

  • Group page specific components with the pages
  • View page component in isolation

File Structure

3

Route Naming Convention

4

Could remove partials as routes in production

3

4

Route Naming Convention

Can copy

this convention

or come up

with your own

Wrap 3rd Party Code

5

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

https://deltener.com/blog/nuxt-enterprise-patterns-provider-abstractions/

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

  • Decreases chance of third-party lock-in
  • Increases surface area for app specific optimizations

Why?

Replace deps in one place

Wrap 3rd Party

// Http.js
import axios from 'axios'
export default class Http{
  async get(url){
    const response = await axios.get(url);
    return response.data;
  }
  // ...
}

File Structure

3

Wrap 3rd Party Code

5

// Http.js
export default class Http{
  async get(url){
    const response = await fetch(url);
    return await response.json();
  }
  // ...
}

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

Replace deps in one place

export default class Http{
  async get(url){
    try {
      const response = await fetch(url);
      return await response.json();
    } catch (err) {
      alert(err);
    }
  }
  // ...
}

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

Extend Functionality

// Http.js
import Cache from './Cache.js'
export default class Http{
  async get(url){
    const cached = Cache.get(url)
    if(cached) return cached
    const response = await fetch(url);
    return await response.json();
  }
  // ...
}

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

Extend Functionality

Works for Components Too!

// AppIcon.vue
<template>
  <FontAwesomeIcon v-if="type==='fa'" :icon="icon" />
  <md_icon v-if="type=== 'md'">{{icon}}</md_icon>
</template>
<script>
export default{
  props:{
    type: { type: String, default: 'fa' },
    icon: { type: String, required: true }
  }
}
</script>

Wrap 3rd Party

File Structure

3

Wrap 3rd Party Code

5

Interact with Backends with an SDK

6

axios('https://someapi.com/posts/1')

post.find(1)

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

post.find(1)

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

  • helps prevent typos
  • provides opportunity to do client side data normalization in a single place (think date strings to Date objects)
  • Also easier to spot errors and provide typesafety

Firebase

https://firebase.google.com/

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

https://vueschool.io/courses/the-vuejs-3-master-class

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

Supabase

https://supabase.com/

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

masteringnuxt.com

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

Supabase

https://supabase.com/

npx supabase gen types typescript --project-id "$PROJECT_ID" --schema public > types/supabase.ts

Wrap 3rd Party

File Structure

3

Interact with Backends with an SDK

6

Laravel Query Builder

spatie.be/docs/laravel-query-builder/v5/introduction

Testing

7

File Structure

3

Testing

7

  • Just do it (your future self with thank you)
  • Provides confidence to refactor
  • Documents expectations and clarifies functionality

Why?

File Structure

3

Testing

7

  • Start early
  • TDD (or don't)
  • Run tests in pipeline (otherwise they'll get ignored and go stale)
  • Focus on public interfaces when testing components (not internal implementations)

Tips

File Structure

3

Testing

7

Tooling

Official Vue.js Docs

Vue School Courses

Vue School Courses

🔥 Course just completed!

Vue Corporate Training

from

  • Vue Video Courses
  • Live Workshops
  • Bi-Weekly Support Sessions
  • Database for Hiring Vue Developers

vueschool.io/vue-corporate-training

Upcoming Workshops

April 3

February 2

March 15

🔥 Free

https://vueschool.io/workshops/

Official Vue.js Certification

https://certification.vuejs.org/

@danielkelly_io

@danielkellyio

Alabama, USA

Thank You!