Initial commit
This commit is contained in:
16
.editorconfig
Normal file
16
.editorconfig
Normal file
@@ -0,0 +1,16 @@
|
||||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
end_of_line = crlf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.yml]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
18
.eslintrc
Normal file
18
.eslintrc
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"@nuxtjs/eslint-config-typescript",
|
||||
"plugin:nuxt/recommended",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"plugins": [],
|
||||
"rules": {
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/no-multiple-template-root": "off",
|
||||
"max-length": 80
|
||||
}
|
||||
}
|
||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@@ -0,0 +1 @@
|
||||
* text= auto
|
||||
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
.env
|
||||
dist
|
||||
|
||||
.vercel
|
||||
10
.prettierrc
Normal file
10
.prettierrc
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"semi": true,
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"bracketSameLine": false,
|
||||
"endOfLine": "crlf",
|
||||
"quoteProps": "consistent",
|
||||
"printWidth": 80
|
||||
}
|
||||
9
.vscode/extensions.json
vendored
Normal file
9
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"voorjaar.windicss-intellisense",
|
||||
"Vue.volar"
|
||||
]
|
||||
}
|
||||
15
.vscode/settings.json
vendored
Normal file
15
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.quickSuggestions": {
|
||||
"strings": "on"
|
||||
},
|
||||
"css.validate": false,
|
||||
"cSpell.words": [
|
||||
"headlessui",
|
||||
"supabase",
|
||||
"Twemoji",
|
||||
"Unplugin",
|
||||
"windi",
|
||||
"windicss"
|
||||
]
|
||||
}
|
||||
42
README.md
Normal file
42
README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install --shamefully-hoist
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on http://localhost:3000
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
|
||||
30
app.vue
Normal file
30
app.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<main
|
||||
class="bg-light-100 flex justify-center items-center w-screen h-screen overflow-hidden"
|
||||
>
|
||||
<div
|
||||
v-animate
|
||||
:keyframes="{ y: [0, -20, 0] }"
|
||||
:options="{
|
||||
repeat: Infinity,
|
||||
duration: 5,
|
||||
easing: ['ease-in-out', 'ease-in-out'],
|
||||
}"
|
||||
class="font-bold font-mono text-center text-dark-900"
|
||||
>
|
||||
<IconMdi:heart
|
||||
class="h-20 w-20 fill-dark-900"
|
||||
v-animate
|
||||
:keyframes="{ scaleX: [1, -1, 1], y: [0, -10, 0] }"
|
||||
:options="{
|
||||
repeat: Infinity,
|
||||
duration: 5,
|
||||
easing: ['ease-in-out', 'ease-in-out'],
|
||||
}"
|
||||
/>
|
||||
<p>Hello, Kei</p>
|
||||
</div>
|
||||
</main>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
17
components.d.ts
vendored
Normal file
17
components.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
'IconMdi:heart': typeof import('~icons/mdi/heart')['default']
|
||||
'IconMdi:menu': typeof import('~icons/mdi/menu')['default']
|
||||
'IconTwemoji:heart': typeof import('~icons/twemoji/heart')['default']
|
||||
'IconTwemoji:redHeart': typeof import('~icons/twemoji/red-heart')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
70
layouts/default.vue
Normal file
70
layouts/default.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
|
||||
import { useAnimations } from 'vue-motion-one';
|
||||
|
||||
const animations = useAnimations();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot />
|
||||
<footer class="fixed left-0 bottom-0 z-10 w-screen">
|
||||
<Menu as="nav" class="p-2 relative inline-block text-left">
|
||||
<transition
|
||||
enter-active-class="transition duration-100 ease-out"
|
||||
enter-from-class="transform scale-y-95 opacity-0 translate-y-3"
|
||||
enter-to-class="transform scale-y-100 opacity-100 translate-y-0"
|
||||
leave-active-class="transition duration-75 ease-out"
|
||||
leave-from-class="transform scale-y-100 opacity-100 translate-y-0"
|
||||
leave-to-class="transform scale-y-95 opacity-0 translate-y-3"
|
||||
>
|
||||
<MenuItems class="left-0 mb-2 w-56 bg-light-700 p-2 rounded-md">
|
||||
<MenuItem v-slot="{ active }">
|
||||
<a :class="{ 'bg-blue-500': active }"> Account settings </a>
|
||||
</MenuItem>
|
||||
<MenuItem v-slot="{ active }">
|
||||
<a :class="{ 'bg-blue-500': active }"> Documentation </a>
|
||||
</MenuItem>
|
||||
<MenuItem disabled>
|
||||
<span class="opacity-75">Invite a friend (coming soon!)</span>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
<MenuButton
|
||||
@click="
|
||||
() => {
|
||||
animations.label.reverse();
|
||||
animations.button.reverse();
|
||||
animations.icon.reverse();
|
||||
}
|
||||
"
|
||||
class="bg-light-500 p-1 rounded-md min-w-7 h-7 fill-dark-900 flex items-center"
|
||||
v-animate="'button'"
|
||||
:keyframes="{
|
||||
width: ['4rem', '1.75rem'],
|
||||
}"
|
||||
:options="{ duration: 0.6 }"
|
||||
>
|
||||
<IconMdi:menu
|
||||
v-animate="'icon'"
|
||||
:keyframes="{
|
||||
transform: ['translateX(0px)', 'translateX(2px)'],
|
||||
}"
|
||||
/>
|
||||
<p
|
||||
v-animate="'label'"
|
||||
:keyframes="{
|
||||
transform: [
|
||||
'translateX(15px) scaleX(1)',
|
||||
'translateX(-10px) scaleX(0)',
|
||||
],
|
||||
opacity: [100, 0, 0],
|
||||
}"
|
||||
:options="{ duration: 0.6 }"
|
||||
class="px-1 fixed"
|
||||
>
|
||||
Menu
|
||||
</p>
|
||||
</MenuButton>
|
||||
</Menu>
|
||||
</footer>
|
||||
</template>
|
||||
34
nuxt.config.ts
Normal file
34
nuxt.config.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { defineNuxtConfig } from 'nuxt';
|
||||
import UnpluginComponentsVite from 'unplugin-vue-components/vite';
|
||||
import IconsResolver from 'unplugin-icons/resolver';
|
||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||
export default defineNuxtConfig({
|
||||
ssr: true,
|
||||
modules: [
|
||||
'nuxt-windicss',
|
||||
'@nuxtjs/color-mode',
|
||||
'@vueuse/nuxt',
|
||||
'@nuxtjs/supabase',
|
||||
'unplugin-icons/nuxt'
|
||||
],
|
||||
css: [
|
||||
'virtual:windi-base.css',
|
||||
'virtual:windi-components.css',
|
||||
'virtual:windi-utilities.css',
|
||||
],
|
||||
build: {
|
||||
transpile: ['@headlessui/vue']
|
||||
},
|
||||
vite: {
|
||||
plugins: [
|
||||
UnpluginComponentsVite({
|
||||
dts: true,
|
||||
resolvers: [
|
||||
IconsResolver({
|
||||
prefix: 'Icon',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
});
|
||||
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
|
||||
"lint:fix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .gitignore ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@headlessui/vue": "1.6.7",
|
||||
"@iconify/json": "^2.1.81",
|
||||
"@nuxtjs/color-mode": "^3.1.4",
|
||||
"@nuxtjs/eslint-config-typescript": "^10.0.0",
|
||||
"@nuxtjs/eslint-module": "^3.1.0",
|
||||
"@nuxtjs/supabase": "^0.1.19",
|
||||
"@vueuse/nuxt": "^8.9.4",
|
||||
"eslint": "^8.20.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-nuxt": "^3.2.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"motion": "^10.13.1",
|
||||
"nuxt": "3.0.0-rc.6",
|
||||
"nuxt-windicss": "^2.4.3",
|
||||
"prettier": "^2.7.1",
|
||||
"typescript": ">=2.8.0",
|
||||
"unplugin-icons": "^0.14.7",
|
||||
"unplugin-vue-components": "^0.21.1",
|
||||
"vite": ">=2.3.0 <3.0.0 || >=3.0.0-0 <3.0.0",
|
||||
"vue": ">=3.0.0-0 <3.0.0 || >=3.2.0 <4.0.0 || >=2.6.0 <3.0.0",
|
||||
"vue-motion-one": "^0.2.5",
|
||||
"webpack": ">=4.0.0 <5.0.0 || >=5.0.0 <6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=2.8.0",
|
||||
"vite": ">=2.3.0 <3.0.0 || >=3.0.0-0 <3.0.0",
|
||||
"vue": ">=3.0.0-0 <3.0.0 || >=3.2.0 <4.0.0 || >=2.6.0 <3.0.0",
|
||||
"webpack": ">=4.0.0 <5.0.0 || >=5.0.0 <6.0.0"
|
||||
}
|
||||
}
|
||||
6
plugins/motion.ts
Normal file
6
plugins/motion.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { MotionOnePlugin } from 'vue-motion-one';
|
||||
|
||||
export default defineNuxtPlugin(Nuxt => {
|
||||
Nuxt.vueApp.use(MotionOnePlugin);
|
||||
})
|
||||
|
||||
7256
pnpm-lock.yaml
generated
Normal file
7256
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
tsconfig.json
Normal file
12
tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
// https://v3.nuxtjs.org/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"types": [
|
||||
"nuxt-windicss",
|
||||
"@vueuse/nuxt",
|
||||
"unplugin-icons/types/vue"
|
||||
]
|
||||
}
|
||||
}
|
||||
5
windi.config.ts
Normal file
5
windi.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { defineConfig } from 'windicss/helpers';
|
||||
|
||||
export default defineConfig({
|
||||
darkMode: 'class',
|
||||
});
|
||||
Reference in New Issue
Block a user