estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add nuxtui

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-08 12:19:19 +01:00
parent 054706922f
commit aa3fcc3960
12 changed files with 1496 additions and 1525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/app.config.ts
View File

@@ -1,8 +1,20 @@
export default defineAppConfig({ export default defineAppConfig({
name: "Nuxtor", app: {
author: "Nicola Spadari", name: "Nuxtor",
repo: "https://github.com/NicolaSpadari/nuxtor", author: "Nicola Spadari",
tauriSite: "https://v2.tauri.app", repo: "https://github.com/NicolaSpadari/nuxtor",
nuxtSite: "https://nuxt.com", tauriSite: "https://tauri.app",
unoSite: "https://unocss.dev" nuxtSite: "https://nuxt.com",
nuxtUiSite: "https://ui3.nuxt.dev"
},
ui: {
colors: {
neutral: "zinc"
},
button: {
slots: {
base: "cursor-pointer"
}
}
}
}); });

38
app/app.vue
View File

@@ -1,35 +1,11 @@
<template> <template>
<Html class="min-h-screen scroll-smooth"> <Html class="overflow-x-hidden">
<Body class="overflow-x-hidden bg-dark-800 text-white font-text antialiased"> <Body class="font-sans antialiased">
<NuxtLayout> <UApp>
<NuxtPage /> <NuxtLayout>
</NuxtLayout> <NuxtPage />
</NuxtLayout>
</UApp>
</Body> </Body>
</Html> </Html>
</template> </template>
<style lang="scss">
html {
-webkit-tap-highlight-color: transparent;
}
img {
-webkit-user-drag: none;
@apply select-none;
}
// Transitions
.page-enter-active,
.page-leave-active {
@apply transition-opacity ease-in-out duration-300;
}
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity ease-in-out duration-500;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
@apply opacity-0;
}
</style>

45
app/assets/css/main.css Normal file
View File

@@ -0,0 +1,45 @@
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-Heading: "Montserrat", sans-serif;
--font-sans: "Inter", sans-serif;
--color-primary: var(--ui-color-primary-500);
--color-secondary: var(--ui-color-secondary-500);
--color-success: var(--ui-color-success-500);
--color-info: var(--ui-color-info-500);
--color-warning: var(--ui-color-warning-500);
--color-error: var(--ui-color-error-500)
}
@layer base {
-webkit-tap-highlight-color: transparent;
}
@layer utilities {
.flex-center {
@apply flex justify-center items-center;
}
.absolute-center-h: {
@apply left-1/2 transform -translate-x-1/2;
}
.absolute-center-v{
@apply top-1/2 transform -translate-y-1/2;
}
}
.page-enter-active,
.page-leave-active {
@apply transition-opacity ease-in-out duration-300;
}
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity ease-in-out duration-500;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
@apply opacity-0;
}

54
app/components/Site/Navbar.vue
View File

@@ -11,23 +11,9 @@
<Icon name="heroicons-solid:bars-3" class="size-6" /> <Icon name="heroicons-solid:bars-3" class="size-6" />
</button> </button>
</div> </div>
<div class="hidden" lg="flex gap-x-12">
<NavLink to="/commands"> <UNavigationMenu :items="items" class="w-full justify-center" />
Commands
</NavLink>
<NavLink to="/notifications">
Notifications
</NavLink>
<NavLink to="/os">
OS Informations
</NavLink>
<NavLink to="/file">
File
</NavLink>
<NavLink to="/store">
Store
</NavLink>
</div>
<div class="hidden" lg="flex flex-1 justify-end"> <div class="hidden" lg="flex flex-1 justify-end">
<p class="text-sm text-white font-semibold leading-6"> <p class="text-sm text-white font-semibold leading-6">
v{{ tauriVersion }} v{{ tauriVersion }}
@@ -40,10 +26,32 @@
<script lang="ts" setup> <script lang="ts" setup>
const { showSidebar } = useSidebar(); const { showSidebar } = useSidebar();
const tauriVersion = await useTauriAppGetTauriVersion(); const tauriVersion = await useTauriAppGetTauriVersion();
</script>
<style scoped> const items = ref([
.router-link-exact-active:not(.home){ {
@apply text-emerald-500; label: "Commands",
} to: "/commands",
</style> icon: "lucide:square-terminal"
},
{
label: "Notifications",
to: "/notifications",
icon: "lucide:message-square-more"
},
{
label: "OS Informations",
to: "/os",
icon: "lucide:info"
},
{
label: "Files",
to: "/notifications",
icon: "lucide:file"
},
{
label: "Store",
to: "/store",
icon: "lucide:database"
},
]);
</script>

6
app/components/Site/Sidebar.vue
View File

@@ -47,9 +47,3 @@
const tauriVersion = await useTauriAppGetTauriVersion(); const tauriVersion = await useTauriAppGetTauriVersion();
const { showSidebar } = useSidebar(); const { showSidebar } = useSidebar();
</script> </script>
<style scoped>
.router-link-exact-active:not(.home){
@apply text-emerald-500;
}
</style>

2
app/composables/sidebar.ts
View File

@@ -1,5 +1,5 @@
export const useSidebar = () => { export const useSidebar = () => {
const showSidebar = useState("sidebar", () => false); const showSidebar = useState("showSidebar", () => false);
return { return {
showSidebar showSidebar

4
app/layouts/default.vue
View File

@@ -3,8 +3,8 @@
<SiteNavbar class="sticky" /> <SiteNavbar class="sticky" />
<SiteSidebar /> <SiteSidebar />
<div crate> <UContainer>
<slot /> <slot />
</div> </UContainer>
</div> </div>
</template> </template>

2
app/layouts/home.vue
View File

@@ -3,7 +3,7 @@
<SiteNavbar class="fixed w-full" /> <SiteNavbar class="fixed w-full" />
<SiteSidebar /> <SiteSidebar />
<div class="relative overflow-hidden px-6" lg="px-8"> <div class="relative overflow-hidden px-6 lg:px-8">
<DesignTopBlob /> <DesignTopBlob />
<DesignBottomBlob /> <DesignBottomBlob />

16
app/pages/index.vue
View File

@@ -5,24 +5,24 @@
<div class="text-center"> <div class="text-center">
<h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl"> <h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl">
{{ name.toUpperCase() }} {{ app.name.toUpperCase() }}
</h1> </h1>
<p class="mt-5 flex gap-1 text-neutral-300 leading-8"> <p class="mt-5 flex gap-1 text-neutral-300 leading-8">
Powered by Powered by
<NuxtLink :to="nuxtSite" target="_blank" class="text-accent underline"> <NuxtLink :to="app.nuxtSite" target="_blank" class="text-accent underline">
Nuxt 3 Nuxt 3
</NuxtLink> </NuxtLink>
- -
<NuxtLink :to="tauriSite" target="_blank" class="text-accent underline"> <NuxtLink :to="app.tauriSite" target="_blank" class="text-accent underline">
Tauri 2 Tauri 2
</NuxtLink> </NuxtLink>
- -
<NuxtLink :to="unoSite" target="_blank" class="text-accent underline"> <NuxtLink :to="app.NuxtUiSite" target="_blank" class="text-accent underline">
UnoCSS NuxtUI 3
</NuxtLink> </NuxtLink>
</p> </p>
<div class="mt-15"> <div class="mt-15">
<Hyperlink :to="repo"> <Hyperlink :to="app.repo">
Star on GitHub Star on GitHub
</Hyperlink> </Hyperlink>
</div> </div>
@@ -31,14 +31,14 @@
<div class="fixed bottom-6 text-sm absolute-center-h"> <div class="fixed bottom-6 text-sm absolute-center-h">
<p class="text-sm text-neutral-500"> <p class="text-sm text-neutral-500">
Made by {{ author }} Made by {{ app.author }}
</p> </p>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const { name, author, repo, tauriSite, nuxtSite, unoSite } = useAppConfig(); const { app } = useAppConfig();
definePageMeta({ definePageMeta({
layout: "home" layout: "home"

17
nuxt.config.ts
View File

@@ -1,10 +1,9 @@
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: [ modules: [
"@vueuse/nuxt", "@vueuse/nuxt",
"@unocss/nuxt", "@nuxt/ui",
"@nuxt/icon",
"@nuxt/fonts",
"nuxt-svgo", "nuxt-svgo",
"reka-ui/nuxt",
"@nuxt/eslint" "@nuxt/eslint"
], ],
app: { app: {
@@ -26,16 +25,8 @@ export default defineNuxtConfig({
} }
}, },
css: [ css: [
"@unocss/reset/tailwind.css" "@/assets/css/main.css"
], ],
fonts: {
defaults: {
weights: [`${100}..${900}`]
}
},
icon: {
mode: "svg"
},
svgo: { svgo: {
autoImportPath: "@/assets/" autoImportPath: "@/assets/"
}, },
@@ -72,5 +63,5 @@ export default defineNuxtConfig({
future: { future: {
compatibilityVersion: 4 compatibilityVersion: 4
}, },
compatibilityDate: "2025-01-01" compatibilityDate: "2025-02-01"
}); });

6
package.json
View File

@@ -23,6 +23,7 @@
"tauri:build:debug": "tauri build --debug" "tauri:build:debug": "tauri build --debug"
}, },
"dependencies": { "dependencies": {
"@nuxt/ui": "3.0.0-alpha.12",
"@tauri-apps/api": ">=2.2.0", "@tauri-apps/api": ">=2.2.0",
"@tauri-apps/plugin-fs": "^2.2.0", "@tauri-apps/plugin-fs": "^2.2.0",
"@tauri-apps/plugin-notification": "^2.2.1", "@tauri-apps/plugin-notification": "^2.2.1",
@@ -36,17 +37,12 @@
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^4.1.1", "@antfu/eslint-config": "^4.1.1",
"@nuxt/eslint": "^1.0.1", "@nuxt/eslint": "^1.0.1",
"@nuxt/fonts": "^0.10.3",
"@nuxt/icon": "^1.10.3",
"@tauri-apps/cli": ">=2.2.7", "@tauri-apps/cli": ">=2.2.7",
"@unocss/eslint-plugin": "^65.4.3",
"@unocss/nuxt": "^65.4.3",
"@vueuse/core": "^12.5.0", "@vueuse/core": "^12.5.0",
"@vueuse/nuxt": "^12.5.0", "@vueuse/nuxt": "^12.5.0",
"bumpp": "^10.0.2", "bumpp": "^10.0.2",
"eslint": "9.17.0", "eslint": "9.17.0",
"nuxt-svgo": "^4.0.14", "nuxt-svgo": "^4.0.14",
"sass": "^1.84.0",
"typescript": "^5.7.3" "typescript": "^5.7.3"
} }
} }

2807
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff