Use v-bind for prop destructuring

Use v-bind as kind of a “prop destructuring” instead of passing multiple object properties into a component as props.

<template>
  <post
    :id="post.id"
    :title="post.title"
    :author="post.author"
  />
  
  <!-- This (↑) is the same as this (↓) -->

  <post v-bind="post" />
</template>

<script>
// <post> component definition
export default {
  props: {
    id: Number,
    title: String,
    author: Object
  }
}
</script>

This tip originally appeared as a tweet.

Caleb Porzio

Methods to computed properties

When you find yourself in need of using an argument for a computed property, consider creating and moving the logic into a child component.

<!-- BEFORE -->
<template>
  <section class="posts">
    <article v-for="post in posts">
      <a :href="getUrl(post)">{{ getTitle(post) }}</a>
    </article>
  </section>
</template>

<script>
export default {
  methods: {
    getUrl (post) { ... },
    getTitle (post) { ... }
  }
}
</script>


<!-- AFTER -->
<!-- 1. PostList.vue -->
<template>
  <section class="posts">
    <PostItem v-for="post in posts" :post="post"/>
  </section>
</template>

<!-- 2. PostItem.vue -->
<template>
  <article v-for="post in posts">
    <a :href="url">{{ title }}</a>
  </article>
</template>

<script>
export default {
  props: ['post'],
  computed: {
    url () { /* compute on this.post */ },
    title () { /* compute on this.post */ }
  }
}
</script>

This results in simpler and decoupled components, structured and moduralized code, plus you have the benefits of computed property’s caching for free.

Originally tweeted by @alexjoverm.

Phan An

Fetch and display HTML

Sometimes you just want to fetch some HTML from the server, display them right in your application, and call it done.

<template>
  <html-fetcher url="/your/static/content.html"/>
</template>

<script>
import axios from 'axios'

Vue.component('html-fetcher', {
  template: '<div>Loading…</div>',
  props: ['url'],
  mounted () {
    axios.get(this.url).then(({ data }) => this.$el.outerHTML = data)
  }
})
</script>