ue 3.x

Function-based Component API

• What is it?
• What problems does it solve?
• What are the benefits?
• How do we use it _today_?
• Build a simple image search app with the new API

---

DISCLAIMER

This talk is not an extension of the long drawn out controversy about the RFC of the new function based component API.

This talk is an introduction to the new API.

Catchup on all the drama here
View the full RFC here

---

What is it?

• ✨ A new API for creating components introduced as an RFC for Vue 3.x
• ➕ The API is purely additive to 2.x and doesn't break anything.
• 📖 The API is currently an OPEN RFC, which means it's not set in stone and can change based on user feedback.

---

What problems does it solve?

What are the benefits?

• 🛀 Presents a clean and flexible way to compose logic inside and between components.
• 🎉 It is naturally type-friendly.
• 📦 Smaller bundle size. The APIs are exposed as simple functions and can easily be tree-shaken. New APIs can easily be introduced in the future.

---

How do we use it today?

---

Install the `vue-function-api` package from npm into your existing Vue 2.x application:

npm i vue-function-api

OR add from a CDN if not using the CLI:

<script src="https://unpkg.com/vue-function-api/dist/vue-function-api.umd.js"></script>

---

Use the plugin:

import Vue from 'vue';
import { plugin } from 'vue-function-api';

Vue.use(plugin);

---

<!-- Template syntax remains the same! -->
<template>
  <div>
    <h1>Hello {{fullName}}</h1>
    <input v-model="firstName" />
    <input v-model="lastName" />
  </div>
</template>
<script>
  // import the functions you need
  import { value, computed } from 'vue-function-api';
  export default {
    // Your component now has 1 function, setup:
    setup(props, context) {
      // props are props...
      // context has all the things you're used to on `this` i.e. attrs, emit, parent, root etc.

      const firstName = value('CJ');
      const lastName = value('R.');
      // Access the value here with .value, in the template we do not need to do this
      const fullName = computed(() => `${firstName.value} ${lastName.value}`);
      // whatever is returned will be available in the template
      return {
        firstName,
        lastName,
        fullName
      };
    }
  };
</script>

---

Build a simple image search app with the new API

View the code here.

---

Thank you!

@cj on Denver Devs
[email protected]
git.io/w3cj

w3cj.sh

YouTube.com/c/CodingGardenWithCJ