How to use the @vue/composition-api.onMounted function in @vue/composition-api

To help you get started, we’ve selected a few @vue/composition-api examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github logaretm / vue-use-web / src / LocalStorage.ts View on Github external
let initialized = false;

  // early init if possible.
  if (typeof window !== 'undefined') {
    init();
    initialized = true;
  }

  function handler(e: StorageEvent) {
    if (e.key === key) {
      value.value = e.newValue ? parseValue(e.newValue) : null;
    }
  }

  onMounted(() => {
    if (!initialized) {
      init();
    }

    window.addEventListener('storage', handler, true);
  });

  onUnmounted(() => {
    localStorage.setItem(key, JSON.stringify(value.value));
    window.removeEventListener('storage', handler);
  });

  return {
    value
  };
}
github logaretm / vue-use-web / src / DeviceOrientation.ts View on Github external
export function useDeviceOrientation() {
  const isAbsolute = ref(false);
  const alpha: Ref = ref(0);
  const beta: Ref = ref(0);
  const gamma: Ref = ref(0);

  function handler(event: DeviceOrientationEvent) {
    isAbsolute.value = event.absolute;
    alpha.value = event.alpha;
    beta.value = event.beta;
    gamma.value = event.gamma;
  }

  onMounted(() => {
    window.addEventListener('deviceorientation', handler);
  });

  onUnmounted(() => {
    window.removeEventListener('deviceorientation', handler);
  });

  return {
    isAbsolute,
    alpha,
    beta,
    gamma
  };
}
github logaretm / vue-use-web / src / IntersectionObserver.ts View on Github external
export function useIntersectionObserver(
  target: Ref,
  options: IntersectionObserverInit = { root: null, rootMargin: '0px' }
) {
  const intersectionRatio = ref(0);
  const isIntersecting = ref(false);
  const isFullyInView = ref(false);

  function observe() {
    if (target.value) {
      observer.observe(target.value);
    }
  }

  let observer: IntersectionObserver;
  onMounted(() => {
    observer = new IntersectionObserver(([entry]) => {
      intersectionRatio.value = entry.intersectionRatio;
      if (entry.intersectionRatio > 0) {
        isIntersecting.value = true;
        isFullyInView.value = entry.intersectionRatio >= 1;
        return;
      }

      isIntersecting.value = false;
    }, options);

    observe();
  });

  function unobserve() {
    if (!observer) return;
github LinusBorg / composition-api-demos / src / composables / use-event.js View on Github external
export default function useEvent(el = ref(document), name, handler) {
  el = unwrap(el)
  const remove = () => el && el.removeEventListener(name, handler)

  onMounted(() => el && el.addEventListener(name, handler))
  onBeforeDestroy(remove)

  return remove
}
github pikax / vue-composable / dist / vue-composable.cjs.js View on Github external
function useEvent(el, name, listener, options) {
    const element = wrap(el);
    const remove = () => element.value.removeEventListener(name, listener);
    compositionApi.onMounted(() => element.value.addEventListener(name, listener, options));
    compositionApi.onUnmounted(remove);
    return remove;
}
github pikax / vue-composable / dist / vue-composable.es.js View on Github external
function useEvent(el, name, listener, options) {
    const element = wrap(el);
    const remove = () => element.value.removeEventListener(name, listener);
    onMounted(() => element.value.addEventListener(name, listener, options));
    onUnmounted(remove);
    return remove;
}
github logaretm / vue-use-web / src / Worker.ts View on Github external
const data: Ref = ref(null);
  let worker: Worker;

  const post: typeof worker.postMessage = function post(val: any) {
    if (!worker) return;

    worker.postMessage(val);
  };

  const terminate: typeof worker.terminate = function terminate() {
    if (!worker) return;

    worker.terminate();
  };

  onMounted(() => {
    worker = new Worker(url);

    worker.onmessage = (e: MessageEvent) => {
      data.value = e.data;
    };
  });

  onUnmounted(() => {
    worker.terminate();
  });

  return {
    data,
    post,
    terminate
  };
github logaretm / vue-use-web / src / Network.ts View on Github external
downlinkMax.value = (window.navigator as any).connection.downlinkMax;
    effectiveType.value = (window.navigator as any).connection.effectiveType;
    saveData.value = (window.navigator as any).connection.saveData;
    type.value = (window.navigator as any).connection.type;
  }

  const onOffline = () => {
    isOnline.value = false;
    offlineAt.value = Date.now();
  };

  const onOnline = () => {
    isOnline.value = true;
  };

  onMounted(() => {
    updateNetworkInformation();
    window.addEventListener('offline', onOffline);
    window.addEventListener('online', onOnline);
    if ('connection' in window.navigator) {
      (window.navigator as any).connection.addEventListener('change', updateNetworkInformation, false);
    }
  });

  onUnmounted(() => {
    window.removeEventListener('offline', onOffline);
    window.removeEventListener('online', onOnline);
    if ('connection' in window.navigator) {
      (window.navigator as any).connection.removeEventListener('change', updateNetworkInformation, false);
    }
  });