Made it compatible with the new composition api

README.md

@@ -31,6 +31,17 @@ yarn add vue-plugin-load-script@">=2.0.0"
 ```
 
 ```javascript
+  // There are 2 ways of using the function:
+  // By importing the function
+  import { loadScript } from "vue-plugin-load-script";
+  loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
+    .then(() => {
+      // Script is loaded, do something
+    })
+    .catch(() => {
+      // Failed to fetch script
+    });
+
   // As an instance method inside a component
   this.$loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
     .then(() => {
@@ -41,9 +52,20 @@ yarn add vue-plugin-load-script@">=2.0.0"
     });
 ```
 
-If you'd like to remove (unload) the script at any point, then call the companion method `$unloadScript` __with the same URL__.
+If you'd like to remove (unload) the script at any point, then call the companion method `unloadScript` / `this.$unloadScript` __with the same URL__.
 
 ```javascript
+  // There are 2 ways of using the function:
+  // By importing the function
+  import { unloadScript } from "vue-plugin-load-script";
+  unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
+    .then(() => {
+      // Script was unloaded successfully
+    })
+    .catch(() => {
+      // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
+    });
+
   // As an instance method inside a component
   this.$unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
     .then(() => {
@@ -53,4 +75,4 @@ If you'd like to remove (unload) the script at any point, then call the companio
       // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
     });
 ```
-In most situations, you can just call `this.$unloadScript` and ignore the returned promise.
+In most situations, you can just call `unloadScript` / `this.$unloadScript` and ignore the returned promise.

index.js

@@ -1,48 +1,53 @@
-const LoadScript = {
+function loadScript(src) {
+  // eslint-disable-line no-param-reassign
+  return new Promise(function (resolve, reject) {
+    let shouldAppend = false;
+    let el = document.querySelector('script[src="' + src + '"]');
+    if (!el) {
+      el = document.createElement("script");
+      el.type = "text/javascript";
+      el.async = true;
+      el.src = src;
+      shouldAppend = true;
+    } else if (el.hasAttribute("data-loaded")) {
+      resolve(el);
+      return;
+    }
+
+    el.addEventListener("error", reject);
+    el.addEventListener("abort", reject);
+    el.addEventListener("load", function loadScriptHandler() {
+      el.setAttribute("data-loaded", true);
+      resolve(el);
+    });
+
+    if (shouldAppend) document.head.appendChild(el);
+  });
+}
+
+function unloadScript(src) {
+  // eslint-disable-line no-param-reassign
+  return new Promise(function (resolve, reject) {
+    const el = document.querySelector('script[src="' + src + '"]');
+
+    if (!el) {
+      reject();
+      return;
+    }
+
+    document.head.removeChild(el);
+
+    resolve();
+  });
+}
+
+export { unloadScript, loadScript };
+
+const plugin = {
   install: function (app) {
-    app.config.globalProperties.$loadScript = function (src) {
-      // eslint-disable-line no-param-reassign
-      return new Promise(function (resolve, reject) {
-        let shouldAppend = false;
-        let el = document.querySelector('script[src="' + src + '"]');
-        if (!el) {
-          el = document.createElement('script');
-          el.type = 'text/javascript';
-          el.async = true;
-          el.src = src;
-          shouldAppend = true;
-        } else if (el.hasAttribute('data-loaded')) {
-          resolve(el);
-          return;
-        }
-
-        el.addEventListener('error', reject);
-        el.addEventListener('abort', reject);
-        el.addEventListener('load', function loadScriptHandler() {
-          el.setAttribute('data-loaded', true);
-          resolve(el);
-        });
-
-        if (shouldAppend) document.head.appendChild(el);
-      });
-    };
-
-    app.config.globalProperties.$unloadScript = function (src) {
-      // eslint-disable-line no-param-reassign
-      return new Promise(function (resolve, reject) {
-        const el = document.querySelector('script[src="' + src + '"]');
-
-        if (!el) {
-          reject();
-          return;
-        }
-
-        document.head.removeChild(el);
-
-        resolve();
-      });
-    };
+    app.config.globalProperties.$loadScript = loadScript;
+    app.config.globalProperties.$unloadScript = unloadScript;
   },
 };
 
-export default LoadScript;
+export default plugin;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-plugin-load-script",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A Vue plugin for injecting remote scripts",
   "main": "index.js",
   "repository": "https://github.com/tserkov/vue-plugin-load-script",