Vue MDBootstrap

Appearance

Global API ​

Functional API provided by Vue MDBootstrap.

Since v2.0.0

createVueMdb ​

Creates an application instance and register all components, plugins and directives.

ts
function createVueMdb(rootComponent: Component): App

Example ​

With inline root component:

ts
import { createVueMdb } from 'vue-mdbootstrap';

const app = createVueMdb({
  /* root component options */
});
app.mount('#app');

With imported component:

ts
import { createVueMdb } from 'vue-mdbootstrap';
import App from './App.vue';

const app = createVueMdb(App);
app.mount('#app');

Standalone web page:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"/>
  <link href="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/bundle-core.min.css" rel="stylesheet" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/theme-light.min.css" rel="stylesheet" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/vue-mdb.umd.min.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="app" class="container">
    <h3 class="mt-4">Contextual Buttons</h3>
    <bs-card class="mt-4">
      <bs-card-body>
        <div class="flex flex-wrap md-gap-3">
          <bs-button @click="count++">Click me</bs-button>
          <bs-button color="primary" @click="count++">Click me</bs-button>
          <bs-button color="secondary" @click="count++">Click me</bs-button>
          <bs-button color="success" @click="count++">Click me</bs-button>
          <bs-button color="danger" @click="count++">Click me</bs-button>
          <bs-button color="warning" @click="count++">Click me</bs-button>
          <bs-button color="info" @click="count++">Click me</bs-button>
        </div>
      </bs-card-body>
      <bs-card-footer class="font-weight-semibold">Count: {{ count }}</bs-card-footer>
    </bs-card>
  </div>
  <script>
    const { ref } = Vue;
    const { createVueMdb } = VueMdb;
    const app = createVueMdb({
      setup() {
        const count = ref(0);
        return {count};
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

useAxiosPlugin ​

Vue MDBootstrap provides built-in axios plugin to perform HTTP request. This function retrieve axios plugin instance. Must be called within component or within <script setup>.

ts
function useAxiosPlugin(): AxiosInstance | undefined

See axios library for the instance method details.

Example ​

ts
import { useAxiosPlugin } from 'vue-mdbootstrap';

const axios = useAxiosPlugin();
const response = await axios?.get("<api-url>");

useHttpService ​

Retrieve HTTP service plugin instance. This instance will forward all the HTTP request task to the axios plugin. Must be called within component or within <script setup>.

ts
function useHttpService(): IHttpService | undefined

Example ​

ts
import { useHttpService } from 'vue-mdbootstrap';

const http = useHttpService();
const response = await http?.get("<api-url>");

Instance Method ​

  • get
    ts
    interface IHttpService {
  get(url: string, data?: TRecord, options?: RawAxiosRequestConfig): AxiosPromise; 
}

    Send HTTP GET to the remote service.

    Details:

    • url: the API url
    • data: the data to be sent (optional)
    • options: Additional options (optional)
  • patch
    ts
    interface IHttpService {
  patch(url: string, data: TRecord | FormData, options?: RawAxiosRequestConfig): AxiosPromise;
}

    Send HTTP PATCH to the remote service.

    Details:

    • url: the API url
    • data: the data to be sent
    • options: Additional options (optional)
  • post
    ts
    interface IHttpService {
  post(url: string, data: TRecord | FormData, options?: RawAxiosRequestConfig): AxiosPromise;
}

    Send HTTP POST to the remote service.

    Details:

    • url: the API url
    • data: the data to be sent
    • options: Additional options (optional)
  • put
    ts
    interface IHttpService {
  put(url: string, data: TRecord | FormData, options?: RawAxiosRequestConfig): AxiosPromise;
}

    Send HTTP PUT to the remote service.

    Details:

    • url: the API url
    • data: the data to be sent
    • options: Additional options (optional)
  • delete
    ts
    interface IHttpService {
  delete(url: string, data?: TRecord, options?: RawAxiosRequestConfig): AxiosPromise;
}

    Send HTTP DELETE to the remote service.

    Details:

    • url: the API url
    • data: the data to be sent (optional)
    • options: Additional options (optional)

useVueMdbService ​

Shortcut to retrieve the VueMdb plugin instance.

ts
function useVueMdbService(): TVueMdb | undefined

useVueMdbNotification ​

Shortcut to retrieve the INotificationProvider instance. See Notification component for more details.

ts
function useVueMdbNotification(): INotificationProvider | undefined

Example ​

ts
import { useVueMdbNotification } from 'vue-mdbootstrap';

const notification = useVueMdbNotification();
notification?.success("Your message");
notification?.warning("Your message", "Message Title");

useBreakpointMax ​

Simple function to detect whether a device's screen is within allowable maximum screen resolution. Returns true when the screen resolution is within allowable resolution otherwise false. Available breakpoints are: xs, sm, md, lg, and xl.

ts
function useBreakpointMax(breakpoint: TBreakpoint | number): boolean

See Bootstrap Breakpoints for more details.

Example ​

ts
import { ref } from 'vue';
import { useBreakpointMax } from 'vue-mdbootstrap';

const appCpanel = ref({
  isMobile: false,
  isTablet: false,
  isDesktop: true,
  sideDrawerOpen: !useBreakpointMax('lg'),
});

if (useBreakpointMax('lg')) {
  appCpanel.value.sideDrawerOpen = false;
  appCpanel.value.isTablet = true;
  appCpanel.value.isMobile = false;
  appCpanel.value.isDesktop = false;
}

useBreakpointMin ​

Simple function to detect whether a device's screen is within allowable minimum screen resolution. Returns true when the screen resolution is within allowable resolution otherwise false. Available breakpoints are: xs, sm, md, lg, and xl.

ts
function useBreakpointMin(breakpoint: TBreakpoint | number): boolean

See Bootstrap Breakpoints for more details.

Example ​

ts
import { ref } from 'vue';
import { useBreakpointMin } from 'vue-mdbootstrap';

const appCpanel = ref({
  isMobile: false,
  isTablet: false,
  isDesktop: true,
});

if (useBreakpointMin('xl')) {
  appCpanel.value.isMobile = false;
  appCpanel.value.isTablet = false;
  appCpanel.value.isDesktop = true;
}

useMobileDevice ​

Check whether it is using a mobile browser or not. Returns true if mobile browser is used otherwise false.

ts
function useMobileDevice(): boolean

useAddResizeListener ​

Simple function that use ResizeObserver Web API to detect if an Element's dimension was changed or not. Must be called within component or within <script setup>.

ts
function useAddResizeListener(el: IBindingElement, fn: CallableFunction): void

Example ​

ts
import { useAddResizeListener } from 'vue-mdbootstrap';

const divElem = document.querySelector("body > div");

function onResize(): void {
  // Do some task here 
}

onMounted(() => {
  useAddResizeListener(divElem as IBindingElement, onResize);  
});

useRemoveResizeListener ​

Remove observer from an element and disconnect ResizeObserver instance if no more element to observe. Must be called within component or within <script setup>.

ts
function useRemoveResizeListener(el: IBindingElement, fn?: CallableFunction): void

Example ​

ts
import { useAddResizeListener, useRemoveResizeListener } from 'vue-mdbootstrap';

const divElem = document.querySelector("body > div");

function onResize(): void {
  // Do some task here 
}

onMounted(() => {
  useAddResizeListener(divElem as IBindingElement, onResize);  
});

onBeforeUnmount(() => {
  useRemoveResizeListener(divElem as IBindingElement, onResize);  
});

useCurrentRoute ​

Get current active route if exists. Returns current route location if Vue Router instance already loaded.

ts
function useCurrentRoute(): Ref<RouteLocationNormalizedLoaded> | undefined

useGenerateId ​

Generate component's ID.

ts
function useGenerateId(): string

useMergeClass ​

Added in v2.1.0

Merge one or more CSS classes.

ts
function useMergeClass(...args: (string | string[])[]): string[]

Details:

  • args: The CSS classes to be merged.

useRenderSlot ​

Added in v2.1.0

Simple function to render a VNode with custom slot. If the custom slot doesn't exist or undefined then the default children will be rendered.

ts
function useRenderSlot(
  slots: Slots,
  name: string,
  props: Readonly<TRecord>,
  children?: VNodeArrayChildren | VNode,
  slotArgs?: TRecord
): VNode

Details:

  • slots: The slot instance
  • name: The slot name
  • props: VNode property, include slot identifier
  • children: The default VNode children to replace the slot (optional)
  • slotArgs: The argument for the given slot (optional)

useRenderSVG ​

Added in v2.1.0

Function to draw inline SVG xml directly.

ts
function useRenderSVG(
  data: string,
  width: number,
  height: number,
  clazz: string | string[]
): VNode

Details:

  • data: The SVG xml string
  • width: The desired Element width
  • height: The desired Element height
  • clazz: Optional css class name

useRenderTransition ​

Added in v2.1.0

Simple function to render a Transition component.

ts
function useRenderTransition(
  props: Readonly<TransitionProps>,
  children: VNodeArrayChildren | VNode,
  asBlock?: boolean
): VNode

Details:

  • props: The transition properties
  • children: The child nodes
  • asBlock: Render the Transition as block VNode (optional)

useWrapSlot ​

Added in v2.2.0

Simple function to render a VNode with custom slot and wrap it with the given wrapperTag and properties. If the custom slot doesn't exist or undefined then the default children will be rendered inside the wrapperTag.

ts
function useWrapSlot(
  slots: Slots,
  name: string,
  key: string,
  wrapperProps: Readonly<TRecord>,
  children?: VNodeArrayChildren | VNode,
  wrapperTag?: string,
  slotArgs?: TRecord
): VNode

Details:

  • slots: The slot instance
  • name: The slot name
  • key: Fragment key identifier
  • wrapperProps: The VNode wrapper properties
  • children: The default VNode children to replace the slot (optional)
  • wrapperTag: Valid html tag name, default is div (optional)
  • slotArgs: The argument for the given slot (optional)

useWrapSlotDefault ​

Added in v2.2.0

Simple function to render an HTML tag as VNode or render default slot and wrap an HTML tag around it.

ts
function useWrapSlotDefault(
  tag: string,
  slots?: Slots,
  classes?: string | string[],
  styles?: TRecord
): VNode

Details:

  • tag: Valid HTML tag name
  • slots: The slot instance (optional)
  • classes: Custom CSS classes to apply (optional)
  • styles: Custom inline stylesheet to apply (optional)

useWrapSlotWithCondition ​

Added in v2.2.0

Simple function to render a VNode with custom slot and wrap it with the given wrapTag and properties. The VNode will be rendered if the given condition is matched.

ts
function useWrapSlotWithCondition(
  slots: Slots,
  name: string,
  condition: boolean,
  wrapProps?: Readonly<TRecord>,
  wrapTag?: string,
  slotArgs?: TRecord
): VNode | undefined

Details:

  • slots: The slot instance
  • name: The slot name
  • condition: The given condition
  • wrapProps: The VNode wrapper properties (optional)
  • wrapTag: Valid html tag name, default is div (optional)
  • slotArgs: The argument for the given slot (optional)

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar