Skip to content

Commit

Permalink
feat: Vue 2.7 compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
adamberecz committed Jul 11, 2022
1 parent 99603d0 commit 39112fa
Show file tree
Hide file tree
Showing 12 changed files with 3,389 additions and 6,576 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## v2.1.0

> `2022-07-11`
### 🎉 Features
- Vue `2.7` compatibility.

## v2.0.2

> `2022-05-11`
Expand Down
62 changes: 22 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,52 +126,34 @@ npm install @vueform/toggle

## Using with Vue 2

When using Vue 2 install [@vue/composition-api](https://github.com/vuejs/composition-api#npm) via npm/yarn first:

``` bash
npm i @vue/composition-api --save-dev
```

Then install the plugin for Vue:

``` js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
```

After that make sure to change the imported Toggle module to:

``` js
import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
```

## Using with Nuxt.js

First you need install [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/getting-started/setup):
``` vue
<template>
<div>
<Toggle v-model="value" />
</div>
</template>
``` bash
npm i @nuxtjs/composition-api --save
```
<script>
import Toggle from '@vueform/toggle/toggle.vue2.js'
Then you need to enable it as a module in `nuxt.config.js`:
export default {
components: {
Toggle,
},
data() {
return {
value: true
}
}
}
</script>
``` js
{
buildModules: [
'@nuxtjs/composition-api/module'
]
}
<style src="@vueform/toggle/themes/default.css"></style>
```

After that make sure to change the imported module to Vue 2 version of Toggle:

``` js
import Toggle from '@vueform/toggle/dist/toggle.vue2'
```
#### Using with < Vue 2.7

For more information on using `@nuxtjs/composition-api` read [their documentation](https://composition-api.nuxtjs.org/).
Switch to [`<= 2.0.2`](https://github.com/vueform/toggle/tree/2.0.2) to use the Toggle with Vue.js `< 2.7`.

## Support

Expand Down
6 changes: 3 additions & 3 deletions build/vue2.rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default [
vue(),
alias({
entries: [
{ find: 'composition-api', replacement: '@vue/composition-api' },
{ find: 'composition-api', replacement: 'vue' },
]
}),
babel({
Expand All @@ -23,7 +23,7 @@ export default [
}),
terser(),
],
external: ['@vue/composition-api'],
external: ['vue'],
},
{
input: 'src/Toggle.vue',
Expand All @@ -32,7 +32,7 @@ export default [
format: 'iife',
name: 'VueformToggle',
globals: {
'composition-api': 'VueCompositionAPI',
'composition-api': 'Vue',
'vue': 'Vue',
}
},
Expand Down
2 changes: 1 addition & 1 deletion dist/toggle.global.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 39112fa

Please sign in to comment.