feat: drop Vue 2 support for Vue 3 (#387)

BREAKING CHANGE: This plugin is now only compatible with Vue 3.

README.md

@@ -1,14 +1,15 @@
 # vue-numerals
 
 [![](https://img.shields.io/npm/v/vue-numerals.svg)](https://www.npmjs.com/package/vue-numerals)
-[![Build Status](https://travis-ci.com/Kocal/vue-numerals.svg?token=pNBs2oaRpfxdyhqWf28h&branch=master)](https://travis-ci.com/Kocal/vue-numerals)
+![Node CI](https://github.com/Kocal/vue-numerals/workflows/Node%20CI/badge.svg)
+![Release](https://github.com/Kocal/vue-numerals/workflows/Release/badge.svg)
 
 > Use the power of [Numerals.js](http://numeraljs.com) to properly format numbers inside your Vue components!
 
 # Requirements
 
-- Vue 2
-- Node.js 8+
+- Vue 3 (for Vue 2, see https://github.com/Kocal/vue-numerals/tree/v3)
+- Node.js 10+
 
 # Installation
 
@@ -28,16 +29,20 @@ $ yarn add vue-numerals 'numeral@>=2'
 ```
 
 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue';
 import VueNumerals from 'vue-numerals';
+import App from './App.vue'
 
-Vue.use(VueNumerals); // default locale is 'en'
+const app = createApp(App);
+
+app.use(VueNumerals); // default locale is 'en'
 
 // with options
-Vue.use(VueNumerals, {
+app.use(VueNumerals, {
   locale: 'fr'
 });
 
+app.mount('#app');
 ```
 
 # Usage
@@ -48,16 +53,20 @@ Inside your component:
 <template>
   <div>
     <!-- Will display: `12,345` -->
-    <p>{{ count | numeralFormat }}</p>
+    <p>{{ numeralFormat(count) }}</p>
     
     <!-- Will display: `12,345 $` --> 
-    <p>{{ count | numeralFormat('0,0[.]00 $') }}</p>
+    <p>{{ numeralFormat(count, '0,0[.]00 $') }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  data: () => ({ count: 12345 }),
+  data() {
+    return {
+      count: 12345,
+    };
+  },
 }
 </script>
 ```

package.json

@@ -27,7 +27,8 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "@kocal/semantic-release-preset": "^2.0.6",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@vue/compiler-sfc": "^3.0.0-rc.9",
+    "@vue/test-utils": "^2.0.0-beta.3",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
@@ -43,13 +44,12 @@
     "precise-commits": "^1.0.2",
     "prettier": "^1.16.4",
     "semantic-release": "^17.1.1",
-    "vue": "^2.6.3",
-    "vue-template-compiler": "^2.6.3",
+    "vue": "^3.0.0-rc.9",
     "webpack": "^4.29.2",
     "webpack-cli": "^3.2.3"
   },
   "peerDependencies": {
     "numeral": ">=2",
-    "vue": ">=2"
+    "vue": "^3.0.0-rc.9"
   }
 }

src/index.js

@@ -2,16 +2,12 @@ import numeral from 'numeral';
 import 'numeral/locales';
 
 /**
- * @param {VueConstructor} Vue
+ * @param {import('vue').App} app
  * @param {string?} locale
  */
-export default function install(Vue, { locale = 'en' } = {}) {
+export default function install(app, { locale = 'en' } = {}) {
   numeral.locale(locale);
 
-  Vue.filter('numeralFormat', (value, format = '0,0') => numeral(value).format(format));
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-  // eslint-disable-next-line no-undef
-  Vue.use(install);
+  // eslint-disable-next-line no-param-reassign
+  app.config.globalProperties.numeralFormat = (value, format = '0,0') => numeral(value).format(format);
 }

test/index.test.js

@@ -1,53 +1,68 @@
-import Vue from 'vue';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import VueNumerals from '../src';
 
-Vue.config.productionTip = false;
-
 describe('filter', () => {
-  let localVue;
-  let wrapper;
-
-  beforeEach(() => {
-    localVue = createLocalVue();
-  });
-
   test('format with default locale (en) and default format', () => {
-    localVue.use(VueNumerals);
-
-    wrapper = mount({ template: '<p>{{ 12345 | numeralFormat }}</p>' }, { localVue });
+    const wrapper = mount(
+      { template: '<p>{{ numeralFormat(12345) }}</p>' },
+      {
+        global: {
+          plugins: [VueNumerals]
+        }
+      }
+    );
 
     expect(wrapper.html()).toBe('<p>12,345</p>');
   });
 
   test('format with default locale (en) and custom format', () => {
-    localVue.use(VueNumerals);
-
-    wrapper = mount({ template: '<p>{{ 12345 | numeralFormat("0o") }}</p>' }, { localVue });
+    const wrapper = mount(
+      { template: '<p>{{ numeralFormat(12345, "0o") }}</p>' },
+      {
+        global: {
+          plugins: [VueNumerals]
+        }
+      }
+    );
 
     expect(wrapper.html()).toBe('<p>12345th</p>');
   });
 
   test('format with custom locale (fr) and default format', () => {
-    localVue.use(VueNumerals, { locale: 'fr' });
-
-    wrapper = mount({ template: '<p>{{ 12345 | numeralFormat }}</p>' }, { localVue });
+    const wrapper = mount(
+      { template: '<p>{{ numeralFormat(12345) }}</p>' },
+      {
+        global: {
+          plugins: [[VueNumerals, { locale: 'fr' }]]
+        }
+      }
+    );
 
     expect(wrapper.html()).toBe('<p>12 345</p>');
   });
 
   test('format with default locale (fr) and custom format', () => {
-    localVue.use(VueNumerals, { locale: 'fr' });
-
-    wrapper = mount({ template: '<p>{{ 12345 | numeralFormat("0o") }}</p>' }, { localVue });
+    const wrapper = mount(
+      { template: '<p>{{ numeralFormat(12345, "0o") }}</p>' },
+      {
+        global: {
+          plugins: [[VueNumerals, { locale: 'fr' }]]
+        }
+      }
+    );
 
     expect(wrapper.html()).toBe('<p>12345e</p>');
   });
 
   test('format with custom locale (ru) and custom format', () => {
-    localVue.use(VueNumerals, { locale: 'ru' });
-
-    wrapper = mount({ template: '<p>{{ 12345 | numeralFormat("0,0[.]00 $") }}</p>' }, { localVue });
+    const wrapper = mount(
+      { template: '<p>{{ numeralFormat(12345, "0,0[.]00 $") }}</p>' },
+      {
+        global: {
+          plugins: [[VueNumerals, { locale: 'ru' }]]
+        }
+      }
+    );
 
     expect(wrapper.html()).toBe('<p>12 345 руб.</p>');
   });