Initial commit
This commit is contained in:
Riyyi
+24
@@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
* Website
|
||||
|
||||
Website, written in Typescript.
|
||||
|
||||
* Libraries
|
||||
|
||||
- Vue.js 3
|
||||
- Nuxt
|
||||
- Pinia
|
||||
- PrimeVue
|
||||
- ESLint
|
||||
|
||||
* Development
|
||||
|
||||
The following editor setup has been used:
|
||||
|
||||
#+BEGIN_SRC sh
|
||||
$ bun x nuxi@latest init website
|
||||
$ bun nuxi module add eslint
|
||||
$ bun install --dev typescript
|
||||
$ bun install --dev @vue/language-server
|
||||
$ bun install --dev @vue/typescript-plugin
|
||||
|
||||
$ bun install -g typescript
|
||||
$ bun install -g @vue/language-server
|
||||
$ bun install -g @vue/typescript-plugin
|
||||
|
||||
# Pinia
|
||||
$ bun install pinia
|
||||
|
||||
# PrimeVue
|
||||
$ bun install primevue primeicons @primevue/themes
|
||||
$ bun install --dev @primevue/nuxt-module
|
||||
#+END_SRC
|
||||
@@ -0,0 +1,6 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
)
|
||||
@@ -0,0 +1,26 @@
|
||||
import Aura from "@primevue/themes/aura";
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: "2024-11-01",
|
||||
css: [
|
||||
"primeicons/primeicons.css"
|
||||
],
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
"@nuxt/eslint",
|
||||
"@primevue/nuxt-module"
|
||||
],
|
||||
primevue: {
|
||||
options: {
|
||||
theme: {
|
||||
preset: Aura
|
||||
}
|
||||
}
|
||||
},
|
||||
dir: {
|
||||
public: "../public"
|
||||
},
|
||||
srcDir: "src/",
|
||||
ssr: false
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "website",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primevue/themes": "^4.2.3",
|
||||
"nuxt": "^3.14.1592",
|
||||
"pinia": "^2.2.6",
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.2.3",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint": "^0.7.1",
|
||||
"@primevue/nuxt-module": "^4.2.3",
|
||||
"@types/bun": "latest",
|
||||
"@vue/language-server": "^2.1.10",
|
||||
"@vue/typescript-plugin": "^2.1.10",
|
||||
"typescript": "^5.7.2"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@parcel/watcher"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
|
||||
<div class="loader"></div>
|
||||
<style>
|
||||
.loader {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #000;
|
||||
border-left-color: #000;
|
||||
border-bottom-color: #efefef;
|
||||
border-right-color: #efefef;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: loader 400ms linear infinite;
|
||||
animation: loader 400ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,2 @@
|
||||
<template>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<SharedNavMenu />
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<Menubar :model="items">
|
||||
<template #item="{ item, props, hasSubmenu }">
|
||||
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
|
||||
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
|
||||
<span :class="item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span :class="item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
|
||||
</a>
|
||||
</template>
|
||||
</Menubar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: "Home",
|
||||
icon: "pi pi-home",
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: "Todos",
|
||||
icon: "pi pi-check",
|
||||
command: () => {
|
||||
router.push("/todos");
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
icon: "pi pi-link",
|
||||
route: "#"
|
||||
},
|
||||
{
|
||||
label: "Service",
|
||||
icon: "pi pi-link",
|
||||
route: "#"
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
icon: "pi pi-link",
|
||||
route: "#"
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<SharedHeader />
|
||||
<slot />
|
||||
<SharedFooter />
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="todos" tableStyle="min-width: 50rem">
|
||||
<Column field="number" header="#"></Column>
|
||||
<Column field="id" header="ID"></Column>
|
||||
<Column field="title" header="Title"></Column>
|
||||
<Column field="modifier" header="Modifier"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
// import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
todos.value = [
|
||||
{ number: "1", id: "toby", title: "Do stuff..", modifier: "hehe"}
|
||||
]
|
||||
});
|
||||
|
||||
const todos = ref();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in New Issue
Block a user