Skip to content

Commit f0779d7

Browse files
alireza0sfralireza0sfr
authored
feat(vue3-migration): Migrates to vue 3 (#352)
- Migrates to vue 3 - Updates all packages - Adds vitest instead of mocha and karma for testing - Adds vite instead of raw webpack - And minor changes BREAKING CHANGE: might break storybook and some of the unit tests Closes #326
1 parent d7c986e commit f0779d7

30 files changed

+3039
-20644
lines changed

‎.eslintrc.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
All notable changes to `vue-draggable-resizable` will be documented in this file
44

5+
## 3.0.0 - ?
6+
- Migrates to vue 3
7+
- Updates all packages
8+
- Adds vitest instead of mocha and karma for testing
9+
- Adds vite instead of raw webpack
10+
- And minor changes
11+
512
## 2.3.0 - 2020-12-17
613
- `scale` prop supports one or two values
714
- component with `active` prop to `true` emits `activated`

‎README.md‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<p align="center"><img src="https://rawgit.com/mauricius/vue-draggable-resizable/v1/docs/resources/logo.png" alt="logo"></p>
2-
<h1 align="center">VueDraggableResizable 2</h1>
2+
<h1 align="center">VueDraggableResizable 3</h1>
33

44
[![Latest Version on NPM](https://img.shields.io/npm/v/vue-draggable-resizable.svg?style=flat-square)](https://npmjs.com/package/vue-draggable-resizable)
55
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
66
[![npm](https://img.shields.io/npm/dt/vue-draggable-resizable.svg?style=flat-square)](https://www.npmjs.com/package/vue-draggable-resizable)
77

8-
> Vue2 Component for draggable and resizable elements.
8+
> Vue Component for draggable and resizable elements.
99
1010
If you are looking for the version 1 of the component, it is available on the [v1 branch](https://github.com/mauricius/vue-draggable-resizable/tree/v1).
1111

@@ -53,16 +53,18 @@ $ npm install --save vue-draggable-resizable
5353
```
5454

5555

56-
Register the component
56+
Register the component globally
5757

5858
```js
59-
import Vue from 'vue'
59+
// main.js
60+
import createApp from 'vue'
6061
import VueDraggableResizable from 'vue-draggable-resizable'
61-
6262
// optionally import default styles
6363
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
64+
import App from '/src/App.vue'
6465

65-
Vue.component('vue-draggable-resizable', VueDraggableResizable)
66+
const app = createApp(App)
67+
app.component('vue-draggable-resizable', VueDraggableResizable)
6668
```
6769

6870
You may now use the component in your markup
@@ -81,6 +83,9 @@ You may now use the component in your markup
8183
import VueDraggableResizable from 'vue-draggable-resizable'
8284
8385
export default {
86+
components: {
87+
'vue-draggable-resizable': VueDraggableResizable
88+
},
8489
data: function () {
8590
return {
8691
width: 0,

‎babel.config.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>vue-draggable-resizable</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)