Update README.md File

.github/workflows/test.yml

@@ -0,0 +1,69 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [master, main, next]
+  pull_request:
+    branches: [master, main, next]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12]
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Remove demo folder
+        run: rm -rdf demo
+
+      - name: Install Yarn
+        run: npm install -g yarn
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Install Codecov
+        run: yarn global add codecov
+
+      - name: Lint
+        run: yarn lint:no-fix
+
+      - name: Test
+        run: yarn test
+
+      - name: Upload to Codecov
+        uses: codecov/[email protected]

README.md

@@ -1,10 +1,10 @@
 # Vue Toastification
-[![NPM](https://flat.badgen.net/npm/v/vue-toastification)](https://www.npmjs.com/package/vue-toastification)  [![Bundle](https://flat.badgen.net/bundlephobia/minzip/vue-toastification)](https://bundlephobia.com/result?p=vue-toastification@latest)
 
-[![Build Status](https://travis-ci.com/Maronato/vue-toastification.svg?branch=master)](https://travis-ci.com/Maronato/vue-toastification) [![codecov](https://codecov.io/gh/Maronato/vue-toastification/branch/master/graph/badge.svg)](https://codecov.io/gh/Maronato/vue-toastification) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/d10315093b4c45a097ac10d1276015ce)](https://app.codacy.com/manual/Maronato/vue-toastification?utm_source=github.com&utm_medium=referral&utm_content=Maronato/vue-toastification&utm_campaign=Badge_Grade_Dashboard) [![Maintainability](https://api.codeclimate.com/v1/badges/8e2c16345047e8e03b58/maintainability)](https://codeclimate.com/github/Maronato/vue-toastification/maintainability)
+**Are you using Vue 3?** Check out [Vue Toastification v2](https://github.com/Maronato/vue-toastification/tree/next)!
 
+[![NPM](https://flat.badgen.net/npm/v/vue-toastification)](https://www.npmjs.com/package/vue-toastification)  [![Bundle](https://flat.badgen.net/bundlephobia/minzip/vue-toastification)](https://bundlephobia.com/result?p=vue-toastification@latest) [![Vue 2](https://img.shields.io/badge/Vue-2-green)](https://img.shields.io/badge/Vue-2-green)
 
-[![dependencies Status](https://david-dm.org/maronato/vue-toastification/status.svg)](https://david-dm.org/maronato/vue-toastification) [![devDependencies Status](https://david-dm.org/maronato/vue-toastification/dev-status.svg)](https://david-dm.org/maronato/vue-toastification?type=dev)
+[![Build Status](https://travis-ci.com/Maronato/vue-toastification.svg?branch=master)](https://travis-ci.com/Maronato/vue-toastification) [![codecov](https://codecov.io/gh/Maronato/vue-toastification/branch/master/graph/badge.svg)](https://codecov.io/gh/Maronato/vue-toastification)
 
 ![vt](https://i.imgur.com/i2PMcTq.gif)
 
@@ -13,6 +13,10 @@ Light, easy and beautiful toasts!
 
 Wanna try it out? Check out the [live demo](https://maronato.github.io/vue-toastification/)!
 
+**Attention!** These are the docs for Vue Toastification v1, which is **only** compatible with Vue 2+
+
+If you are using Vue 3, check out [Vue Toastification v2](https://github.com/Maronato/vue-toastification/tree/next)
+
 
 - [Vue Toastification](#vue-toastification)
   - [Features](#features)
@@ -21,6 +25,7 @@ Wanna try it out? Check out the [live demo](https://maronato.github.io/vue-toast
   - [Usage](#usage)
     - [Plugin registration](#plugin-registration)
     - [Nuxt registration](#nuxt-registration)
+      - [Nuxt and Composition API](#nuxt-and-composition-api)
       - [Injecting the Toast CSS](#injecting-the-toast-css)
     - [Composition API registration](#composition-api-registration)
     - [Generic registration](#generic-registration)
@@ -108,6 +113,7 @@ $ yarn add vue-toastification
 $ npm install --save vue-toastification
 ```
 
+> **Using Vue 3?** You should install [Vue Toastification v2](https://github.com/Maronato/vue-toastification/tree/next) instead.
 
 
 ## Usage
@@ -199,6 +205,22 @@ If you are using Typescript with Nuxt, you may need to add `"vue-toastification/
 }
 ```
 
+#### Nuxt and Composition API
+Since Vue Toastification is auto installed with nuxt, we need not provide it a second time.
+
+To access your `$toast` instance from within `setup()`, import from `vue-toastification/composition/nuxt` like so:
+```ts
+// MyComponent.vue
+
+// Import from vue-toastification/composition/nuxt, not vue-toastification/composition
+import { useToast } from "vue-toastification/composition/nuxt";
+
+// Then, in the setup method
+  setup() {
+    const toast = useToast()
+    // Use it like you would use this.$toast
+  }
+```
 
 #### Injecting the Toast CSS
 By default, when you register the module within Nuxt it automatically injects the CSS required to display the toasts using the default `vue-toastification/dist/index.css` file.
@@ -225,6 +247,8 @@ export default {
 
 If your CSS file is actually an SCSS or SASS file, just make sure that you have the correct loaders installed. See [Nuxt docs](https://nuxtjs.org/api/configuration-css) on that.
 
+If you set `cssFile: false` it's important to notice that `timeout` won't work. See [#107.](https://github.com/Maronato/vue-toastification/issues/107) 
+
 ### Composition API registration
 Vue Toastification comes with built-in support for the [Composition API](https://github.com/vuejs/composition-api). It is fully optional and won't interfere with your usage if you do not use composition.
 
@@ -390,6 +414,8 @@ this.$toast("Persistent toast", { timeout: false })
 Vue.use(Toast, { timeout: 2000 });
 ```
 
+It's important to notice that `timeout` won't work if you set `cssFile: false`. See [#107.](https://github.com/Maronato/vue-toastification/issues/107) 
+
 ### Using a custom component
 Passing strings as the toast content is not enough? You can render anything inside the toast using custom components! Vue Toastification accepts both Vue Components and JSX templates as parameters.
 

composition/index.d.ts

@@ -1,11 +1,11 @@
-import _Vue from "vue";
-import { VueConstructor } from "vue/types/vue";
-import { PluginOptions } from "vue-toastification/dist/types/src/types";
-import ToastInterface from "vue-toastification/dist/types/src/ts/interface";
+import _Vue from "vue"
+import type { VueConstructor } from "vue/types/vue"
+import type { PluginOptions } from "../src/types"
+import type ToastInterface from "../src/ts/interface"
 
-declare let provideToast: (options?: PluginOptions) => void;
+declare let provideToast: (options?: PluginOptions) => void
 declare let useToast: (
   eventBus?: InstanceType<VueConstructor>
-) => ReturnType<typeof ToastInterface>;
+) => ReturnType<typeof ToastInterface>
 
-export { provideToast, useToast };
+export { provideToast, useToast }

composition/nuxt/index.d.ts

@@ -0,0 +1,5 @@
+import type ToastInterface from "../../src/ts/interface";
+
+declare let useToast: () => ReturnType<typeof ToastInterface>;
+
+export { useToast };

composition/nuxt/index.js

@@ -0,0 +1,5 @@
+const { useContext } = require("@nuxtjs/composition-api"); // eslint-disable-line @typescript-eslint/no-var-requires
+
+export const useToast = () => useContext().app.$toast;
+
+module.exports = { useToast };

nuxt/index.d.ts

@@ -1,2 +1,4 @@
-declare const toastModule: import("@nuxt/types").Module<import("../src/types/index").NuxtModuleOptions>;
+declare const toastModule: import("@nuxt/types").Module<
+  import("../src/types/index").NuxtModuleOptions
+>;
 export = toastModule;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toastification",
-  "version": "1.7.7",
+  "version": "1.7.14",
   "private": false,
   "description": "Toasts for Vue made easy!",
   "author": "Gustavo Maronato",
@@ -56,19 +56,21 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.1.2",
     "fibers": "^5.0.0",
+    "husky": "^4.3.0",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "10.3.0",
     "nuxt": "^2.12.2",
+    "plausible-tracker": "^0.3.1",
     "prettier": "^2.0.5",
     "prismjs": "^1.20.0",
     "rollup": "^2.11.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-filesize": "^9.0.0",
-    "rollup-plugin-sass": "^1.2.2",
+    "rollup-plugin-sass": "^1.2.9",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.27.1",
     "rollup-plugin-vue": "<6.0.0",
-    "sass": "^1.26.5",
+    "sass": "^1.43.2",
     "sass-loader": "^10.0.2",
     "typescript": "^4.0.2",
     "vue": "^2.6.11",