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
- Yarn
npm install @nhost/vue graphql
yarn add @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')