How to Use Vue 3 Composition API In Vue 2

How to Use Vue 3 Composition API In Vue 2

This is a Vue.js plugin which provides a simple way to use Vue.js 3 [Composition API](https://vue-composition-api-rfc.netlify.com/) in your Vue.js 2.x apps.

Description:

This is a Vue.js plugin which provides a simple way to use Vue.js 3 Composition API in your Vue.js 2.x apps.

How to use it:

Import the VueCompositionApi.

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Register the plugin and we’re ready to go.

Vue.use(VueCompositionApi);

Usage:

You must install @vue/composition-api via Vue.use() before using other APIs:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

After installing the plugin you can use the Composition API to compose your component.

TypeScript:

This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set vetur.useWorkspaceDependencies to true.

To let TypeScript properly infer types inside Vue component options, you need to define components with createComponent:

import { createComponent } from '@vue/composition-api';

const Component = createComponent({
  // type inference enabled
});

const Component = {
  // this will NOT have type inference,
  // because TypeScript can't tell this is options for a Vue component.
};

TSX:

πŸš€ An Example Repository with TS and TSX support is provided to help you start.

To support TSX, create a declaration file with following content in your project.

// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends ComponentRenderProxy {}
    interface ElementAttributesProperty {
      $props: any; // specify the property name to use
    }
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

Limitations

Ref Unwrap

Unwrap is not working with Array index.

Should not store ref as a direct child of Array:

const state = reactive({
  list: [ref(0)],
});
// no unwrap, `.value` is required
state.list[0].value === 0; // true

state.list.push(ref(1));
// no unwrap, `.value` is required
state.list[1].value === 1; // true

Should not use ref in a plain object when working with Array:

const a = {
  count: ref(0),
};
const b = reactive({
  list: [a], // `a.count` will not unwrap!!
});

// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true
const b = reactive({
  list: [
    {
      count: ref(0), // no unwrap!!
    },
  ],
});

// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true

Should always use ref in a reactive when working with Array:

const a = reactive({
  count: ref(0),
});
const b = reactive({
  list: [a],
});
// unwrapped
b.list[0].count === 0; // true

b.list.push(
  reactive({
    count: ref(1),
  })
);
// unwrapped
b.list[1].count === 1; // true

Using reactive will mutate the origin object

This is an limitation of using Vue.observable in Vue 2.

Vue 3 will return an new proxy object.


watch() API

onTrack and onTrigger are not available in WatchOptions.

Template Refs

βœ… Support ❌ Not Supported

βœ… String ref && return it from setup():

<template>
  <div ref="root"></div>
</template>

<script>
  export default {
    setup() {
      const root = ref(null);

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value); // <div/>
      });

      return {
        root,
      };
    },
  };
</script>

βœ… String ref && return it from setup() && Render Function / JSX:

export default {
  setup() {
    const root = ref(null);

    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(root.value); // <div/>
    });

    return {
      root,
    };
  },
  render() {
    // with JSX
    return () => <div ref="root" />;
  },
};

❌ Function ref:

<template>
  <div :ref="el => root = el"></div>
</template>

<script>
  export default {
    setup() {
      const root = ref(null);

      return {
        root,
      };
    },
  };
</script>

❌ Render Function / JSX in setup():

export default {
  setup() {
    const root = ref(null);

    return () =>
      h('div', {
        ref: root,
      });

    // with JSX
    return () => <div ref={root} />;
  },
};

If you really want to use template refs in this case, you can access vm.$refs via SetupContext.refs.

⚠️ Warning: The SetupContext.refs won't exist in Vue 3.0. @vue/composition-api provide it as a workaround here.

export default {
  setup(initProps, setupContext) {
    const refs = setupContext.refs;
    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(refs.root); // <div/>
    });

    return () =>
      h('div', {
        ref: 'root',
      });

    // with JSX
    return () => <div ref="root" />;
  },
};

You may also need to augment the SetupContext when working with TypeScript:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

declare module '@vue/composition-api/dist/component/component' {
  interface SetupContext {
    readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
  }
}

SSR

Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the onServerPrefetch lifecycle hook that allows you to use the serverPrefetch hook found in the classic API.

import { onServerPrefetch } from '@vue/composition-api';

export default {
  setup (props, { ssrContext }) {
    const result = ref();

    onServerPrefetch(async () => {
      result.value = await callApi(ssrContext.someId);
    });

    return {
      result,
    };
  },
};

Preview:

This is image title

Download Details:

Author: vuejs

Live Demo: https://vue-composition-api-rfc.netlify.com/

Download Link: https://github.com/vuejs/composition-api/archive/master.zip

Install & Download:

# Yarn
$ yarn add @vue/composition-api

# NPM
$ npm install @vue/composition-api --save

# CDN
$ <script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

vuejs javascript vue-js

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Syntax highlighting with highlight.js for Vue.js 2.x

vue-highlightjs .Vue.js syntax highlighting made easy, using highlight.js.

Vue.js components rendering 3D WebGL graphics reactively with three.js

Vue.js components rendering 3D WebGL graphics reactively with three.js .Vue.js components rendering 3D WebGL graphics reactively with three.js.