Setup Nhost with Vue
Get up and running with Nhost and Vue
Create Project
If you haven’t, please create a project through the Nhost Dashboard.
Setup Database
Navigate to the SQL Editor of the database and run the following SQL to create a new table movies
with some great movies.
CREATE TABLE movies (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
director VARCHAR(255),
release_year INTEGER,
genre VARCHAR(100),
rating FLOAT
);
INSERT INTO movies (title, director, release_year, genre, rating) VALUES
('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);
Track this
is enabledpermissions
Select the new table movies
just created, and click in Edit Permissions to set the following permissions for the public
role and select
action.
Setup a Vue Application
Create a Vue application using Vite.
npm create vue@latest nhost-vue-quickstart
Install the Nhost package for Vue
Navidate to the React application and install @nhost/vue
.
cd nhost-vue-quickstart && npm install @nhost/vue
Configure the Nhost client and fetch the list of movies
Create a new file with the following code to creates the Nhost client.
import { NhostClient } from "@nhost/vue";
export const nhost = new NhostClient({
subdomain: "<subdomain>",
region: "<region>",
})
<subdomain>
and <region>
with the subdomain and region for the projectFinally, update ./src/App.vue
to fetch the list of movies.
<script setup>
import { ref, onMounted } from 'vue'
import { nhost } from "./lib/nhost"
const getMoviesQuery = `
query {
movies {
id
title
genre
rating
}
}
`;
const movies = ref([])
async function getMovies() {
const { data } = await nhost.graphql.request(getMoviesQuery)
movies.value = data.movies
}
onMounted(() => {
getMovies()
})
</script>
<template>
<div>
<table>
<tbody>
<tr v-for="movie in movies" :key="movie.id">
<td>{{ movie.title }}</td>
<td>{{ movie.genre }}</td>
<td>{{ movie.rating }}</td>
</tr>
</tbody>
</table>
</div>
</template>
The end
Run your project with npm run dev -- --open --port 3000
and enter http://localhost:3000
in your browser.