Vue Loading Template

Common errors

• Error in main.js: "[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available." or similar template compilation errors.

  cause `vue-loading-template` (like many Vue 2 components) relies on a Vue build that includes the template compiler if you are using it with inline templates (e.g., in a string template in a `.js` file or directly in `index.html`).
  fix Ensure your Webpack or build configuration is set up to use the full build of Vue (e.g., by aliasing `vue` to `vue/dist/vue.esm.js` in Webpack) if you are not using Single File Components (`.vue` files) which pre-compile templates. This is less common in modern Vue CLI setups but can occur in custom configurations.

• TypeError: Cannot read properties of undefined (reading 'use') at <App>

  cause This error often occurs when attempting to use `Vue.use()` with a Vue 3 `createApp` instance or when `Vue` is not correctly imported or available globally.
  fix Verify that your project is indeed a Vue 2 project and that `Vue` is globally available or correctly imported as `import Vue from 'vue'`. If using Vue 3, this library is incompatible and you should seek a Vue 3-native alternative.

Warnings

• breaking This library is built exclusively for Vue 2. It is not compatible with Vue 3 due to fundamental changes in the Vue 3 API, including the `createApp` function and component registration process. Direct usage in a Vue 3 project will lead to runtime errors.
  Fix: For Vue 3 projects, consider using a modern, actively maintained loading library designed for Vue 3, such as `vue-loading-overlay` or `vue-loading-spinner`, or rewrite the component logic to be Vue 3 compatible. Do not attempt to force `vue-loading-template` into a Vue 3 application.
• gotcha The package appears to be unmaintained or abandoned, with no significant updates or bug fixes in over 7 years. This means it may not receive security patches, performance improvements, or compatibility updates for newer browser versions or Vue 2 minor releases.
  Fix: Evaluate the risk of using an unmaintained library. For new projects or those requiring active support, consider alternatives. For existing projects, be aware of potential issues and be prepared to fork or replace the library if problems arise.
• gotcha When installing as a global plugin using `Vue.use(VueLoading)`, the component is registered globally as `<vue-loading>`. Ensure there are no naming conflicts with other components or HTML tags.
  Fix: If conflicts occur, import and register the `VueLoading` component locally in your `components` option, using a different name if necessary, instead of installing it globally.

Install

• npm install vue-loading-template npm
• yarn add vue-loading-template yarn
• pnpm add vue-loading-template pnpm

Imports

• VueLoading
  wrong:

  import VueLoading from 'vue-loading-template'

  correct:

  import { VueLoading } from 'vue-loading-template'

  When importing the component for local registration, use a named import. The default import is for plugin installation.
• VueLoading
  wrong:

  import { VueLoading } from 'vue-loading-template'; Vue.use(VueLoading);

  correct:

  import VueLoading from 'vue-loading-template'; Vue.use(VueLoading);

  When installing as a global Vue plugin via `Vue.use()`, the package exports the plugin as a default export.
• VueLoadingOptions

  import type { VueLoadingOptions } from 'vue-loading-template'

  For TypeScript users, `VueLoadingOptions` provides type hints for the optional configuration object passed to `Vue.use()`.

Quickstart

This example demonstrates how to import and use the `VueLoading` component directly within a Vue 2 component's template, applying different types, colors, and sizes.

<template>
  <div>
    <h2>Loading Example</h2>
    <p>Using the 'bars' type with custom color and size.</p>
    <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
    <p>Another example with 'bubbles' type.</p>
    <vue-loading type="bubbles" color="#5ac1dd"></vue-loading>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { VueLoading } from 'vue-loading-template';

export default defineComponent({
  name: 'App',
  components: {
    VueLoading,
  },
});
</script>