Skip to main content

Vue

The Nhost Vue client exports a Nhost client that can be installed as a Vue plugin, and composables that make it easier to work with Nhost in your Vue app.

Installation​

Install the Nhost Vue client together with GraphQL:

npm install @nhost/vue graphql

Initializing​

Initialize a single nhost instance using your Nhost subdomain and region, and install it as a plugin in your Vue app:

src/main.js
import { NhostClient } from '@nhost/vue'
import { createApp } from 'vue'
import App from './App.vue'

const nhost = new NhostClient({
  subdomain: '<your-subdomain>',
  region: '<your-region>'
})

createApp(App).use(nhost).mount('#app')

Using custom URLs​

There are cases where you might want to use a custom URL for one or more of the services (e.g: when you are self-hosting or you are running services on custom ports). You can do this by passing in the custom URLs when initializing the Nhost client:

src/main.js
import { NhostClient } from '@nhost/vue'
import { createApp } from 'vue'
import App from './App.vue'

const nhost = new NhostClient({
  authUrl: 'https://auth.mydomain.com/v1',
  storageUrl: 'https://storage.mydomain.com/v1',
  graphqlUrl: 'https://graphql.mydomain.com/v1',
  functionsUrl: 'https://functions.mydomain.com/v1'
})

createApp(App).use(nhost).mount('#app')