https://github.com/vsimko/gridsome-plugin-composition-api

Composition API for Gridsome with Vue2
https://github.com/vsimko/gridsome-plugin-composition-api

composition-api gridsome gridsome-plugin migration vue vue2

Last synced: 26 days ago
JSON representation

Composition API for Gridsome with Vue2

• Host: GitHub
• URL: https://github.com/vsimko/gridsome-plugin-composition-api
• Owner: vsimko
• License: mit
• Created: 2020-11-16T11:34:00.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-04T01:50:45.000Z (over 3 years ago)
• Last Synced: 2024-10-11T13:32:38.247Z (26 days ago)
• Topics: composition-api, gridsome, gridsome-plugin, migration, vue, vue2
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gridsome-plugin-composition-api
• Size: 9.77 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gridsome-plugin-composition-api

> Composition API for Gridsome with Vue2

### Quick overview

This plugin enables Composition API inside your Gridsome project even though Gridsome currently relies on Vue2.

Once Gridsome migrates to Vue3 this plugin becomes obsolete, but you'll have an easier migration path.

### Install

Use yarn or npm to install it:

* `yarn add -D gridsome-plugin-composition-api`

* `npm install -D gridsome-plugin-composition-api`

* add `gridsome-plugin-composition-api` in `devDependencies` section in your `package.json` file.

### Usage

Add `gridsome-plugin-composition-api` in your `gridsome.config`

```javascript

module.exports = {

  plugins: [

    {

      use: 'gridsome-plugin-composition-api',

    }

  ]

}

```

Now you can use Composition API in your *.vue files and other *.js or *.ts files:

```html

  import {defineComponent, computed} from "@vue/composition-api";

  export default defineComponent({

    props: {

      title: { type:String, required:true }

    }     

    setup(props) {

      const titleUpper = computed(() => props.title.toUpperCase());

      return {

          titleUpper,

      }

    }

  });

```

### Possible stuff to come ...

Accessing `$static` and `$page` Vue global variables needs to be done differently in Composition API.

In my other codebase, I already have functions `usePageQuery()` and `useStaticQuery()`.

I might publish them as a part of this package if someone requests it.

Here is my work-in-progress implementation in TypeScript:

```typescript

export function useStaticQuery() {

  type ComponentWith$Static = ReturnType & { $static: T };

  return computed(() => {

    const thisComponent = getCurrentInstance() as ComponentWith$Static;

    return thisComponent.$static;

  })

}

export function usePageQuery() {

  type ComponentWith$Page = ReturnType & { $page: T };

  return computed(() => {

    const thisComponent = getCurrentInstance() as ComponentWith$Page;

    return thisComponent.$page;

  })

}

```