Skip to content

Commit 14421b5

Browse files
timbennikstimbenniks
committedDec 20, 2023
basics
0 parents  commit 14421b5

16 files changed

+7313
-0
lines changed
 

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example

‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

‎README.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Nuxt UI Minimal Starter
2+
3+
Look at [Nuxt docs](https://nuxt.com/docs/getting-started/introduction) and [Nuxt UI docs](https://ui.nuxt.com) to learn more.
4+
5+
## Setup
6+
7+
Make sure to install the dependencies:
8+
9+
```bash
10+
# npm
11+
npm install
12+
13+
# pnpm
14+
pnpm install
15+
16+
# yarn
17+
yarn install
18+
19+
# bun
20+
bun install
21+
```
22+
23+
## Development Server
24+
25+
Start the development server on `http://localhost:3000`:
26+
27+
```bash
28+
# npm
29+
npm run dev
30+
31+
# pnpm
32+
pnpm run dev
33+
34+
# yarn
35+
yarn dev
36+
37+
# bun
38+
bun run dev
39+
```
40+
41+
## Production
42+
43+
Build the application for production:
44+
45+
```bash
46+
# npm
47+
npm run build
48+
49+
# pnpm
50+
pnpm run build
51+
52+
# yarn
53+
yarn build
54+
55+
# bun
56+
bun run build
57+
```
58+
59+
Locally preview production build:
60+
61+
```bash
62+
# npm
63+
npm run preview
64+
65+
# pnpm
66+
pnpm run preview
67+
68+
# yarn
69+
yarn preview
70+
71+
# bun
72+
bun run preview
73+
```
74+
75+
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

‎app.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default defineAppConfig({
2+
ui: {
3+
primary: 'sky',
4+
gray: 'slate',
5+
notifications: {
6+
position: 'top-0 bottom-auto'
7+
}
8+
}
9+
})

‎app.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<nuxt-page />
3+
</template>

‎composables/useInfo.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export async function useInfo() {
2+
const client = useSupabaseClient();
3+
4+
const { data: info } = await useAsyncData("info", async () => {
5+
const { data } = await client
6+
.from("table")
7+
.select('*')
8+
9+
return data;
10+
})
11+
12+
return info
13+
}

‎nuxt.config.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default defineNuxtConfig({
2+
devtools: { enabled: true },
3+
modules: ["@nuxt/ui", '@nuxtjs/supabase', '@nuxtjs/algolia'],
4+
5+
supabase: {
6+
redirectOptions: {
7+
login: "/login",
8+
callback: "/confirm",
9+
exclude: [],
10+
}
11+
},
12+
13+
algolia: {
14+
instantSearch: {
15+
theme: 'reset'
16+
}
17+
},
18+
})

‎package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "nuxt-app",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"build": "nuxt build",
7+
"dev": "nuxt dev",
8+
"generate": "nuxt generate",
9+
"preview": "nuxt preview",
10+
"postinstall": "nuxt prepare"
11+
},
12+
"devDependencies": {
13+
"@nuxt/devtools": "latest",
14+
"@nuxt/ui": "^2.9.0",
15+
"@nuxtjs/supabase": "^1.1.4",
16+
"nuxt": "^3.7.4"
17+
},
18+
"dependencies": {
19+
"@nuxtjs/algolia": "^1.10.1"
20+
}
21+
}

‎pages/algolia.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import {
3+
AisInstantSearch,
4+
AisSearchBox,
5+
AisHits,
6+
} from "vue-instantsearch/vue3/es";
7+
8+
const indexName = "algolia_index";
9+
const algolia = useAlgoliaRef();
10+
</script>
11+
12+
<template>
13+
<ais-instant-search :index-name="indexName" :search-client="algolia">
14+
<ais-search-box />
15+
<ais-hits />
16+
</ais-instant-search>
17+
</template>

‎pages/confirm.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
const user = useSupabaseUser();
3+
watch(
4+
user,
5+
() => {
6+
if (user.value) {
7+
return navigateTo("/");
8+
}
9+
},
10+
{ immediate: true }
11+
);
12+
</script>
13+
<template>
14+
<UContainer :ui="{ constrained: 'max-w-xl' }">
15+
<UCard class="mt-10">
16+
<template #header>
17+
<div class="flex justify-between">
18+
<h1 class="font-bold text-xl">Logged in</h1>
19+
<UColorModeButton />
20+
</div>
21+
</template>
22+
23+
<section>
24+
<UAlert
25+
color="green"
26+
variant="subtle"
27+
icon="i-heroicons-check-badge"
28+
title="Validating"
29+
description="Thanks for clicking on the magic link. We are validating your login now."
30+
/>
31+
</section>
32+
</UCard>
33+
</UContainer>
34+
</template>

‎pages/index.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<UContainer>
3+
<UCard class="mt-10">
4+
<template #header>
5+
<div class="flex justify-between">
6+
<h1>Welcome to Nuxt UI Starter</h1>
7+
<ColorScheme
8+
><USelect
9+
v-model="$colorMode.preference"
10+
:options="['system', 'light', 'dark']"
11+
/></ColorScheme>
12+
</div>
13+
</template>
14+
<UButton
15+
icon="i-heroicons-book-open"
16+
to="https://ui.nuxt.com"
17+
target="_blank"
18+
>Open Nuxt UI Documentation</UButton
19+
>
20+
</UCard>
21+
</UContainer>
22+
</template>

‎pages/login.vue

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup lang="ts">
2+
const supabase = useSupabaseClient();
3+
4+
const state = reactive({
5+
email: "",
6+
});
7+
8+
const loginError = ref(false);
9+
const loginSuccess = ref(false);
10+
11+
async function onSubmit() {
12+
const { error } = await supabase.auth.signInWithOtp({
13+
email: state.email,
14+
options: {
15+
emailRedirectTo: "http://localhost:3000/confirm",
16+
},
17+
});
18+
19+
if (error) {
20+
loginError.value = true;
21+
loginSuccess.value = false;
22+
} else {
23+
loginSuccess.value = true;
24+
loginError.value = false;
25+
}
26+
}
27+
28+
const user = useSupabaseUser();
29+
watch(
30+
user,
31+
() => {
32+
if (user.value) {
33+
return navigateTo("/");
34+
}
35+
},
36+
{ immediate: true }
37+
);
38+
</script>
39+
40+
<template>
41+
<UContainer :ui="{ constrained: 'max-w-xl' }">
42+
<UCard class="mt-10">
43+
<template #header>
44+
<div class="flex justify-between">
45+
<h1 class="font-bold text-xl">Log in</h1>
46+
<UColorModeButton />
47+
</div>
48+
</template>
49+
50+
<section>
51+
<UForm
52+
v-if="!loginError && !loginSuccess"
53+
:state="state"
54+
class="space-y-4"
55+
@submit="onSubmit"
56+
>
57+
<UFormGroup label="Email" name="email" v-slot="{ error }">
58+
<UInput
59+
v-model="state.email"
60+
type="email"
61+
placeholder="Enter email"
62+
:icon="
63+
error
64+
? 'i-heroicons-exclamation-triangle-20-solid'
65+
: 'i-heroicons-envelope'
66+
"
67+
/>
68+
</UFormGroup>
69+
70+
<UButton type="submit"> Submit </UButton>
71+
</UForm>
72+
<UAlert
73+
v-if="loginError"
74+
color="red"
75+
variant="subtle"
76+
icon="i-heroicons-exclamation-triangle-20-solid"
77+
title="There was an error"
78+
description="Please reload this page to try again."
79+
/>
80+
<UAlert
81+
v-if="loginSuccess"
82+
color="green"
83+
variant="subtle"
84+
icon="i-heroicons-check-badge"
85+
title="Check your email"
86+
description="A magic login link has been send to your email address."
87+
/>
88+
</section>
89+
</UCard>
90+
</UContainer>
91+
</template>

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎server/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "../.nuxt/tsconfig.server.json"
3+
}

‎tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// https://nuxt.com/docs/guide/concepts/typescript
3+
"extends": "./.nuxt/tsconfig.json"
4+
}

‎yarn.lock

+6,977
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.