Create Vue.js application API

 In this article, we have listed easy ways to create Vue API. Read this full article, to understand the instances better. Install Vue in your system, if you haven’t already. This will be integrated into your Vuejs project that will allow you to build a basic Vue app. 

# 1: createApp()

Create an app instance

Enter the following code

function createApp(rootComponent: Component, rootProps?: object): App

Example:

Use code with inline root component:

import { createApp } from 'vue' const app = createApp({   /* root component options */ })

 Use with imported component:

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App)

# 2: createSSRApp()

Use SSR Hydration mode to create an app instance. The usage is the same as createApp(). 

# 3: app.mount()

Use the corner element to mount the app instances. 

Enter the following code

interface App {   mount(rootContainer: Element | string): ComponentPublicInstance }

Example

import { createApp } from 'vue' const app = createApp(/* ... */) app.mount('#app')

You can also mount to DOM element

app.mount(document.body.firstChild)

# 4: app.unmount()

Unmount all the mounted app instances this will trigger the unmount lifecycle hooks for all kinds of components in the app’s component tree. This will help you integrate API into your Vue application. 

Enter the following code

interface App {   unmount(): void }

# 5: app.provide()

Enter the value which can be used in all descendant components within the app.

Enter the following code

interface App {   provide<T>(key: InjectionKey<T> | symbol | string, value: T): this }

Example

import { createApp } from 'vue' const app = createApp(/* ... */) app.provide('message', 'hello')

Inside a component in the app

export default {   inject: ['message'],   created() {     console.log(this.message) // 'hello'   } }

# 6: app.component()

Create Vuejs API with this component. While passing both a component definition and name string, register a global component. It may retrieve an already one in case the name is passed. 

Enter the following code

interface App {   component(name: string): Component | undefined   component(name: string, component: Component): this }

Example

import { createApp } from 'vue' const app = createApp({}) // register an options object app.component('my-component', {   /* ... */ }) // retrieve a registered component const MyComponent = app.component('my-component')

# 7: app.directive()

This Vuejs API will make your app more interactive. In case you are passing both directive definition and name string, register a global custom directive. It might retrieve an already registered one only if the name is passed.

Enter the following code

interface App {   directive(name: string): Directive | undefined   directive(name: string, directive: Directive): this }

Example

import { createApp } from 'vue' const app = createApp({   /* ... */ }) // register (object directive) app.directive('my-directive', {   /* custom directive hooks */ }) // register (function directive shorthand) app.directive('my-directive', () => {   /* ... */ }) // retrieve a registered directive const myDirective = app.directive('my-directive')

#8 app.use()

First install a plugin

Enter the following code

interface App {   use(plugin: Plugin, ...options: any[]): this }

Example

import { createApp } from 'vue' import MyPlugin from './plugins/MyPlugin' const app = createApp({   /* ... */ }) app.use(MyPlugin)

#9 app.version

Give the Vue version that your app is created with. It will help you inside plugins, where you might need conditional logic which is based on different versions of Vue. 

Enter the following code

interface App {   version: string }

Example

This will help you perform a version check inside a plugin

export default {   install(app) {     const version = Number(app.version.split('.')[0])     if (version < 3) {       console.warn('This plugin requires Vue 3')     }   } }

#9 app.config

Every app instance provides a config element that inculcates the config setting for that app. You can modify its features before mounting your app. 

import { createApp } from 'vue' const app = createApp(/* ... */) console.log(app.config)

#10 app.config.errorHandler

This will help you provide a global handler for uncaught errors from within the app. 

Enter the following code

interface AppConfig {   errorHandler?: (     err: unknown,     instance: ComponentPublicInstance | null,     // `info` is a Vue-specific error info,     // e.g. which lifecycle hook the error was thrown in     info: string   ) => void }

Example

app.config.errorHandler = (err, instance, info) => {   // handle error, e.g. report to a service }

#11 app.config.warnHandler

Provide a custom handler from Vue for runtime warnings

Enter the following code

interface AppConfig {   warnHandler?: (     msg: string,     instance: ComponentPublicInstance | null,     trace: string   ) => void }

Example

app.config.warnHandler = (msg, instance, trace) => {   // `trace` is the component hierarchy trace }

#11 app.config,.performace

To enable compile, component init, patch and render performance tracing in the browser timeline panel/ devtool performance, set this config to true. Only work in browser and development mode that supports the API name performance.mark.

Enter boolean 

#12 app.config.compilerOptions

Configuration of the runtime compiler options. All the values set on this kind of object will be transferred to the in-browser template compiler and this will affect all components in the config application. Remember that you will also override all these options on a per-component basis using the compileroptions options. 

#app.config.compilerOptions.isCustomElement

This specifies a check method in order to recognize native custom options. 

Enter: (tag: string) => boolean

Example

// treat all tags starting with 'ion-' as custom elements app.config.compilerOptions.isCustomElement = (tag) => {   return tag.startsWith('ion-') }

#app.config.compilerOptions.whitespace

This will allow you to adjust whitespace handling behaviour template

Enter: 'condense' | 'preserve'

Default: 'condense'

Example

app.config.compilerOptions.whitespace = 'preserve'

#app.config.compilerOptions.comments

This will allow you to adjust HTML components treatment in templates

Enter: boolean

Default: false

Example

app.config.compilerOptions.comments = true

#13 app.config.globalProperties

It is an object which can be used on any component instance and can be registered on global properties inside the app. 

Enter the following code

interface AppConfig {   globalProperties: Record<string, any> }

Usage

app.config.globalProperties.msg = 'hello'

This allows msg to be available inside any component template inside the app, plus on this of any component instance:

export default {   mounted() {     console.log(this.msg) // 'hello'   } }

#14 app.config.optionMergeStrategies

It is an object for describing merging strategies for custom component options.

Enter the following code

interface AppConfig {   optionMergeStrategies: Record<string, OptionMergeFunction> } type OptionMergeFunction = (to: unknown, from: unknown) => any

Example

const app = createApp({   // option from self   msg: 'Vue',   // option from a mixin   mixins: [     {       msg: 'Hello '     }   ],   mounted() {     // merged options exposed on this.$options     console.log(this.$options.msg)   } }) // define a custom merge strategy for `msg` app.config.optionMergeStrategies.msg = (parent, child) => {   return (parent || '') + (child || '') } app.mount('#app') // logs 'Hello Vue'

In our previous blog we have also talked about firebase authentication for your Vue application.