Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 style guide

Here are some highlights from the Vue.js Style Guide:

1. Component names should be multi-word: This helps to prevent conflicts with existing and future HTML elements. A good practice is to use names that describe what the component does.

<template>
  <!-- Bad -->
  <user />

  <!-- Good -->
  <user-profile />
</template>

2. Base component names: Base components that apply app-specific styling and conventions should all begin with a specific prefix, such as Base, App, or V.

<!-- Bad -->
components/
|- MyButton.vue

<!-- Good -->
components/
|- BaseButton.vue
|- AppButton.vue
|- VButton.vue

3. Single-instance component names: Components that should only ever have a single active instance should begin with the The prefix, to denote that there can be only one.

<template>
  <!-- Bad -->
  <header />

  <!-- Good -->
  <TheHeader />
</template>

4. Tight scoping of v-for indexes: Indexes in v-for loops should be used exclusively with array mutations. This is because indices are not stable, meaning they can change, and that can lead to bugs.

5. Always use key with v-for: Always using key with v-for leads to better performance and helps maintain component state.

<template>
  <!-- Bad -->
  <div v-for="(item, index) in items">{{ item.name }}</div>

  <!-- Good -->
  <div v-for="(item, index) in items" :key="item.id">{{ item.name }}</div>
</template>

6. Component/instance options order: Options should be ordered consistently. Recommended order is:

  • Side Effects (e.g., created, mounted)
  • Global Awareness (e.g., beforeRouteUpdate, beforeRouteLeave)
  • Component Type (e.g., functional)
  • Composition (e.g., provide, inject)
  • Component Options / Props
  • Options / Assets (e.g., methods, computed)
  • Events (e.g., watch)
  • Rendering (e.g., template, render)

7. Element attribute order: The recommended order is:

  • is
  • v-for
  • v-if, v-else-if, v-else, v-show, v-cloak
  • v-model
  • v-pre, v-once
  • id
  • ref, key, v-slot
  • Other attributes
  • v-bind
  • v-on
  • v-html

8. Directive shorthands: Use directive shorthands (: for v-bind:, @ for v-on: and # for v-slot:) everywhere possible.

<!-- Bad -->
<template>
  <input
    v-bind:value="newTodoText"
    v-on:input="newTodoText = $event.target.value"
    v-on:keyup.enter="addTodo"
  >
</template>

<!-- Good -->
<template>
  <input
    :value="newTodoText"
    @input="newTodoText = $event.target.value"
    @keyup.enter="addTodo"
  >
</template>

  1. Vue 3.0 Scoped Styles Usage:

    • Description: Scoped styles allow you to encapsulate styles to a specific component, preventing them from affecting other components.
    • Code:
      <template>
  <div class="scoped-container">
    <p class="scoped-text">Scoped Styles</p>
  </div>
</template>

<style scoped>
  .scoped-container {
    background-color: #eee;
  }

  .scoped-text {
    color: blue;
  }
</style>

  2. Vue 3.0 Dynamic Styles in Templates:

    • Description: You can bind styles dynamically using object syntax in the template.
    • Code:
      <template>
  <div :style="{ backgroundColor: dynamicColor }">
    Dynamic Styles
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dynamicColor: 'red',
      };
    },
  };
</script>

  3. Vue 3.0 Global Styles vs Scoped Styles:

    • Description: Global styles apply to the entire application, while scoped styles are limited to the component they are defined in.
    • Code:
      <!-- Global Styles (in App.vue) -->
<style>
  body {
    font-family: 'Arial', sans-serif;
  }
</style>

<!-- Scoped Styles (in a component) -->
<style scoped>
  .scoped-container {
    background-color: #eee;
  }
</style>

  4. Vue 3.0 CSS Modules Integration:

    • Description: CSS Modules help in locally scoped and modular CSS.
    • Code:
      <template>
  <div :class="$style.container">
    CSS Modules Integration
  </div>
</template>

<style module>
  .container {
    background-color: #ccc;
  }
</style>

  5. Vue 3.0 Applying Styles Conditionally:

    • Description: Use conditional rendering to apply styles based on a condition.
    • Code:
      <template>
  <div :class="{ 'highlighted': isHighlighted }">
    Conditional Styles
  </div>
</template>

<style>
  .highlighted {
    background-color: yellow;
  }
</style>

<script>
  export default {
    data() {
      return {
        isHighlighted: true,
      };
    },
  };
</script>

  6. Vue 3.0 Transition Styles and Animations:

    • Description: Apply styles during transitions for smooth animations.
    • Code:
      <template>
  <transition name="fade">
    <div v-if="show" class="fade-container">
      Transition Styles
    </div>
  </transition>
</template>

<style>
  .fade-container {
    transition: opacity 1s;
  }

  .fade-enter-active, .fade-leave-active {
    opacity: 1;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>

  7. Vue 3.0 Customizing Component Styles:

    • Description: Customize styles based on props or data within a component.
    • Code:
      <template>
  <div :class="{ 'custom-style': useCustomStyle }">
    Customizing Styles
  </div>
</template>

<style>
  .custom-style {
    font-weight: bold;
    color: green;
  }
</style>

<script>
  export default {
    props: {
      useCustomStyle: Boolean,
    },
  };
</script>
Copyright © devanddep.com | All Rights Reserved