2021-07-16 22:11:10 +09:00
# Vueアプリケーションの作成
2023-03-08 18:35:30 +09:00
次のリンクにアクセスすると、StackBlitzでVueアプリケーションを作成できます
2021-07-20 21:06:36 +09:00
2023-03-08 18:35:30 +09:00
[](https://stackblitz.com/fork/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev& file=src/App.vue)
2021-07-20 21:06:36 +09:00
2021-07-25 11:34:58 +09:00
```vue
2022-03-07 14:41:35 +09:00
<!-- src/App.vue -->
2021-07-25 11:34:58 +09:00
{{#include ../frontend/src/App.vue}}
```
2021-07-16 22:11:10 +09:00
2022-08-01 21:20:47 +09:00
ローカル環境で作成する場合は、StackBlitzにアクセスし、左の[Project]パネルから[↓ (Download Project)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。
2022-03-07 14:41:35 +09:00
ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。
```js
// src/App.vue
2023-03-08 18:30:44 +09:00
{{#include ../frontend/src/App.vue:13:15}}
2022-03-07 14:41:35 +09:00
```
このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。
Hasuraを使用してPostgresデータベースに接続したREST APIを構築し、それを利用したWebアプリを作成できました 🎉
2022-02-27 19:18:19 +09:00
Hasuraのコンソールにアクセスすると、実際にデータが更新されていることを確認できます。
2021-07-20 21:06:36 +09:00
2021-07-16 22:11:10 +09:00
