Skip to content

Commit 717e53b

Browse files
charIeszhaocharIeszhao
committed
feat(vue-sample): add vue sample project to demonstrate vue sdk
1 parent 0c0d9e6 commit 717e53b

17 files changed

+744
-19
lines changed

‎packages/vue-sample/.eslintrc.cjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-env node */
2+
require("@rushstack/eslint-patch/modern-module-resolution");
3+
4+
module.exports = {
5+
root: true,
6+
extends: [
7+
"plugin:vue/vue3-essential",
8+
"eslint:recommended",
9+
"@vue/eslint-config-typescript/recommended",
10+
"@vue/eslint-config-prettier",
11+
],
12+
env: {
13+
"vue/setup-compiler-macros": true,
14+
},
15+
};

‎packages/vue-sample/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎packages/vue-sample/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Logto Vue Sample</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎packages/vue-sample/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@logto/vue-sample",
3+
"version": "0.1.7",
4+
"license": "MIT",
5+
"private": true,
6+
"scripts": {
7+
"preinstall": "npx only-allow pnpm",
8+
"precommit": "lint-staged",
9+
"start": "vite",
10+
"check": "vue-tsc --noEmit",
11+
"build": "pnpm check && rm -rf dist && vite build",
12+
"lint": "eslint --ext .vue,.ts src"
13+
},
14+
"dependencies": {
15+
"@logto/vue": "^0.1.7",
16+
"vue": "^3.2.35",
17+
"vue-router": "^4.0.14"
18+
},
19+
"devDependencies": {
20+
"@rushstack/eslint-patch": "^1.1.0",
21+
"@types/node": "^16.11.27",
22+
"@vitejs/plugin-vue": "^2.3.1",
23+
"@vue/eslint-config-prettier": "^7.0.0",
24+
"@vue/eslint-config-typescript": "^10.0.0",
25+
"@vue/tsconfig": "^0.1.3",
26+
"eslint": "^8.5.0",
27+
"eslint-plugin-vue": "^8.2.0",
28+
"lint-staged": "^12.3.4",
29+
"prettier": "^2.5.1",
30+
"typescript": "^4.6.2",
31+
"vite": "^2.9.5",
32+
"vue-tsc": "^0.34.7"
33+
}
34+
}

‎packages/vue-sample/public/favicon.ico

4.19 KB
Binary file not shown.

‎packages/vue-sample/src/App.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { RouterView } from "vue-router";
3+
</script>
4+
5+
<template>
6+
<RouterView />
7+
</template>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
font-family: sans-serif;
14+
background: #101419;
15+
color: #dadae0;
16+
text-align: center;
17+
}
18+
19+
button {
20+
cursor: pointer;
21+
}
22+
</style>

‎packages/vue-sample/src/consts/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const baseUrl = window.location.origin;
2+
export const redirectUrl = `${baseUrl}/callback`;
3+
export const appId = "foo";
4+
5+
export const endpoint = "https://logto.dev"; // OIDC domain

‎packages/vue-sample/src/main.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createApp } from "vue";
2+
import App from "./App.vue";
3+
import router from "./router";
4+
import { createLogto } from "@logto/vue";
5+
import { appId, endpoint } from "./consts";
6+
7+
const app = createApp(App);
8+
9+
app.use(createLogto, { appId, endpoint });
10+
app.use(router);
11+
12+
app.mount("#app");

‎packages/vue-sample/src/router/index.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { createRouter, createWebHistory } from "vue-router";
2+
3+
import CallbackView from "../views/CallbackView.vue";
4+
import HomeView from "../views/HomeView.vue";
5+
6+
const router = createRouter({
7+
history: createWebHistory(),
8+
routes: [
9+
{
10+
path: "/",
11+
name: "home",
12+
component: HomeView,
13+
},
14+
{
15+
path: "/callback",
16+
name: "callback",
17+
component: CallbackView,
18+
},
19+
{
20+
path: "/protected-resource",
21+
name: "protected-resource",
22+
component: () => import("../views/ProtectedResourceView.vue"),
23+
},
24+
],
25+
});
26+
27+
export default router;

‎packages/vue-sample/src/shims-vue.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "*.vue";

‎packages/vue-sample/src/views/CallbackView.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import { useHandleSignInCallback } from "@logto/vue";
3+
4+
export default {
5+
setup() {
6+
const { isLoading } = useHandleSignInCallback();
7+
8+
return {
9+
isLoading,
10+
};
11+
},
12+
};
13+
</script>
14+
<template>
15+
<p v-if="isLoading">Redirecting...</p>
16+
</template>

‎packages/vue-sample/src/views/HomeView.vue

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<script lang="ts">
2+
import { useLogto, type IdTokenClaims } from "@logto/vue";
3+
import { RouterLink } from "vue-router";
4+
import { ref, watchEffect } from "vue";
5+
import { baseUrl, redirectUrl } from "../consts";
6+
7+
export default {
8+
setup() {
9+
const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto();
10+
const idTokenClaims = ref<IdTokenClaims>();
11+
12+
const onClickSignIn = () => {
13+
void signIn(redirectUrl);
14+
};
15+
16+
const onClickSignOut = () => {
17+
void signOut(baseUrl);
18+
};
19+
20+
watchEffect(async () => {
21+
if (isAuthenticated.value) {
22+
const claims = getIdTokenClaims();
23+
idTokenClaims.value = claims;
24+
}
25+
});
26+
27+
return {
28+
idTokenClaims,
29+
isAuthenticated,
30+
onClickSignIn,
31+
onClickSignOut,
32+
};
33+
},
34+
components: {
35+
RouterLink,
36+
},
37+
};
38+
</script>
39+
<template>
40+
<div class="container">
41+
<h3>Logto Vue Sample</h3>
42+
<button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
43+
<button v-else @click="onClickSignOut">Sign Out</button>
44+
<div v-if="isAuthenticated && idTokenClaims">
45+
<table class="table">
46+
<thead>
47+
<tr>
48+
<th>Name</th>
49+
<th>Value</th>
50+
</tr>
51+
</thead>
52+
<tbody>
53+
<tr v-for="(value, key) in idTokenClaims" v-bind:key="key">
54+
<td>{{ key }}</td>
55+
<td>{{ value }}</td>
56+
</tr>
57+
</tbody>
58+
</table>
59+
<RouterLink to="/protected-resource">View Protected Resource</RouterLink>
60+
</div>
61+
</div>
62+
</template>
63+
<style lang="scss">
64+
.container {
65+
padding: 20px;
66+
}
67+
68+
.table {
69+
margin: 50px auto;
70+
table-layout: fixed;
71+
width: 800px;
72+
border: 1px solid #333;
73+
border-spacing: 0;
74+
75+
th,
76+
td {
77+
padding: 10px;
78+
word-wrap: break-word;
79+
border: 1px solid #333;
80+
}
81+
82+
th {
83+
font-weight: bold;
84+
}
85+
}
86+
</style>

‎packages/vue-sample/src/views/ProtectedResourceView.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { useLogto } from "@logto/vue";
3+
import { onMounted } from "vue";
4+
5+
import { redirectUrl } from "../consts";
6+
7+
export default {
8+
setup() {
9+
const { isAuthenticated, isLoading, signIn } = useLogto();
10+
11+
onMounted(() => {
12+
if (!isAuthenticated.value && !isLoading.value) {
13+
void signIn(redirectUrl);
14+
}
15+
});
16+
17+
return {
18+
isAuthenticated,
19+
};
20+
},
21+
};
22+
</script>
23+
<template>
24+
<p v-if="isAuthenticated">
25+
Protected resource is only visible after sign-in.
26+
</p>
27+
</template>

‎packages/vue-sample/tsconfig.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"extends": "@vue/tsconfig/tsconfig.web.json",
3+
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4+
"compilerOptions": {
5+
"baseUrl": ".",
6+
"paths": {
7+
"@/*": ["./src/*"]
8+
}
9+
},
10+
11+
"references": [
12+
{
13+
"path": "./tsconfig.vite-config.json"
14+
}
15+
]
16+
}

‎packages/vue-sample/tsconfig.vite-config.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "@vue/tsconfig/tsconfig.node.json",
3+
"include": ["vite.config.*"],
4+
"compilerOptions": {
5+
"composite": true,
6+
"types": ["node"]
7+
}
8+
}

‎packages/vue-sample/vite.config.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { fileURLToPath, URL } from "url";
2+
3+
import { defineConfig } from "vite";
4+
import vue from "@vitejs/plugin-vue";
5+
6+
// https://vitejs.dev/config/
7+
export default defineConfig({
8+
plugins: [vue()],
9+
resolve: {
10+
alias: {
11+
"@": fileURLToPath(new URL("./src", import.meta.url)),
12+
},
13+
},
14+
optimizeDeps: {
15+
include: ["@logto/vue"],
16+
},
17+
build: {
18+
commonjsOptions: {
19+
include: [/linked-dep/, /node_modules/],
20+
},
21+
},
22+
});

0 commit comments

Comments
 (0)