mirror of
https://github.com/IT4Change/nuxt3-template.git
synced 2025-12-12 20:55:49 +00:00
Ground commit with a working application.
This commit is contained in:
elweyn
parent
6ad5072a1a
commit
53af06c02d
65
README.md
65
README.md
@ -1,2 +1,63 @@
|
||||
# nuxt3-template
|
||||
Template for Nuxt3 project
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
|
||||
7
app.vue
Normal file
7
app.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage/>
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
26
components/FooterBar.vue
Normal file
26
components/FooterBar.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const links = [
|
||||
'Home',
|
||||
'About Us',
|
||||
'Team',
|
||||
'Services',
|
||||
'Blog',
|
||||
'Contact Us',
|
||||
]
|
||||
</script>
|
||||
<template>
|
||||
<v-footer class="bg-grey-lighten-1">
|
||||
<v-row justify="center" no-gutters>
|
||||
<v-btn
|
||||
v-for="link in links"
|
||||
:key="link"
|
||||
color="white"
|
||||
variant="text"
|
||||
class="mx-2"
|
||||
rounded="xl"
|
||||
>
|
||||
{{ link }}
|
||||
</v-btn>
|
||||
</v-row>
|
||||
</v-footer>
|
||||
</template>
|
||||
53
components/NavBar.vue
Normal file
53
components/NavBar.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
const drawer = false
|
||||
const items = [
|
||||
{
|
||||
title: 'Foo',
|
||||
value: 'foo',
|
||||
},
|
||||
{
|
||||
title: 'Bar',
|
||||
value: 'bar',
|
||||
},
|
||||
{
|
||||
title: 'Fizz',
|
||||
value: 'fizz',
|
||||
},
|
||||
{
|
||||
title: 'Buzz',
|
||||
value: 'buzz',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<!-- <v-system-bar color="deep-purple darken-3"></v-system-bar> -->
|
||||
|
||||
<v-app-bar
|
||||
color="primary"
|
||||
prominent
|
||||
>
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-toolbar-title>My files</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn variant="text" icon="mdi-magnify"></v-btn>
|
||||
|
||||
<v-btn variant="text" icon="mdi-filter"></v-btn>
|
||||
|
||||
<v-btn variant="text" icon="mdi-dots-vertical"></v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
location="bottom"
|
||||
temporary
|
||||
>
|
||||
<v-list
|
||||
:items="items"
|
||||
></v-list>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</template>
|
||||
0
layouts/default.spec.ts
Normal file
0
layouts/default.spec.ts
Normal file
31
layouts/default.vue
Normal file
31
layouts/default.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-layout>
|
||||
<div class="main-navigation">
|
||||
<NavBar />
|
||||
</div>
|
||||
<v-main>
|
||||
<slot />
|
||||
</v-main>
|
||||
|
||||
<div id="overlay" />
|
||||
<!-- client-only modal -->
|
||||
<!-- chat -->
|
||||
<v-app-bar
|
||||
color="grey-lighten-2"
|
||||
flat
|
||||
height="48"
|
||||
location="bottom"
|
||||
>
|
||||
<FooterBar />
|
||||
</v-app-bar>
|
||||
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
153
nuxt.config.ts
Normal file
153
nuxt.config.ts
Normal file
@ -0,0 +1,153 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
// runtimeConfig: {
|
||||
// // public: {
|
||||
// // GQL_HOST: 'https://api.spacex.land/graphql' // overwritten by process.env.GQL_HOST
|
||||
// // }
|
||||
// },
|
||||
ssr: false,
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
// '@nuxtjs/tailwindcss',
|
||||
'@invictus.codes/nuxt-vuetify',
|
||||
'@nuxtjs/i18n',
|
||||
// '@nuxtjs/apollo',
|
||||
'nuxt-icon',
|
||||
// '@nuxt/image',
|
||||
'@vite-pwa/nuxt',
|
||||
'vue-email/nuxt',
|
||||
'nuxt-mapbox',
|
||||
'@dargmuesli/nuxt-cookie-control',
|
||||
'nuxt-time',
|
||||
// '@nuxtjs/eslint-module', // ESLintConfig
|
||||
'nuxt-graphql-client',
|
||||
],
|
||||
// apollo: {
|
||||
// clients: {
|
||||
// default: {
|
||||
// httpEndpoint: 'https://api.spacex.land/graphql'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// cookieControl: {
|
||||
// // typed module options
|
||||
// // Position of cookie bar.
|
||||
// // 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
|
||||
// barPosition: 'bottom-full',
|
||||
|
||||
// // Switch to toggle if clicking the overlay outside the configuration modal closes the modal.
|
||||
// closeModalOnClickOutside: true,
|
||||
|
||||
// // Component colors.
|
||||
// // If you want to disable colors set colors property to false.
|
||||
// colors: {
|
||||
// barBackground: '#000',
|
||||
// barButtonBackground: '#fff',
|
||||
// barButtonColor: '#000',
|
||||
// barButtonHoverBackground: '#333',
|
||||
// barButtonHoverColor: '#fff',
|
||||
// barTextColor: '#fff',
|
||||
// checkboxActiveBackground: '#000',
|
||||
// checkboxActiveCircleBackground: '#fff',
|
||||
// checkboxDisabledBackground: '#ddd',
|
||||
// checkboxDisabledCircleBackground: '#fff',
|
||||
// checkboxInactiveBackground: '#000',
|
||||
// checkboxInactiveCircleBackground: '#fff',
|
||||
// controlButtonBackground: '#fff',
|
||||
// controlButtonHoverBackground: '#000',
|
||||
// controlButtonIconColor: '#000',
|
||||
// controlButtonIconHoverColor: '#fff',
|
||||
// focusRingColor: '#808080',
|
||||
// modalBackground: '#fff',
|
||||
// modalButtonBackground: '#000',
|
||||
// modalButtonColor: '#fff',
|
||||
// modalButtonHoverBackground: '#333',
|
||||
// modalButtonHoverColor: '#fff',
|
||||
// modalOverlay: '#000',
|
||||
// modalOverlayOpacity: 0.8,
|
||||
// modalTextColor: '#000',
|
||||
// modalUnsavedColor: '#fff',
|
||||
// },
|
||||
|
||||
// // The cookies that are to be controlled.
|
||||
// // See detailed explanation further down below!
|
||||
// cookies: {
|
||||
// necessary: [],
|
||||
// optional: [],
|
||||
// },
|
||||
|
||||
// // The milliseconds from now until expiry of the cookies that are being set by this module.
|
||||
// cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
|
||||
|
||||
// // Names for the cookies that are being set by this module.
|
||||
// cookieNameIsConsentGiven: 'ncc_c',
|
||||
// cookieNameCookiesEnabledIds: 'ncc_e',
|
||||
|
||||
// // Options to pass to nuxt's useCookie
|
||||
// cookieOptions: {
|
||||
// path: '/',
|
||||
// },
|
||||
|
||||
// // Switch to toggle the "accept necessary" button.
|
||||
// isAcceptNecessaryButtonEnabled: true,
|
||||
|
||||
// // Switch to toggle the button that opens the configuration modal.
|
||||
// isControlButtonEnabled: true,
|
||||
|
||||
// // Switch to toggle the concatenation of target cookie ids to the cookie description.
|
||||
// isCookieIdVisible: false,
|
||||
|
||||
// // Switch to toggle the inclusion of this module's css.
|
||||
// // If css is set to false, you will still be able to access your color variables.
|
||||
// isCssEnabled: true,
|
||||
|
||||
// // Switch to toggle the css variables ponyfill.
|
||||
// isCssPonyfillEnabled: false,
|
||||
|
||||
// // Switch to toggle the separation of cookie name and description in the configuration modal by a dash.
|
||||
// isDashInDescriptionEnabled: true,
|
||||
|
||||
// // Switch to toggle the blocking of iframes.
|
||||
// // This can be used to prevent iframes from adding additional cookies.
|
||||
// isIframeBlocked: false,
|
||||
|
||||
// // Switch to toggle the modal being shown right away, requiring a user's decision.
|
||||
// isModalForced: false,
|
||||
|
||||
// // The locales to include.
|
||||
// locales: ['en'],
|
||||
|
||||
// // Translations to override.
|
||||
// localeTexts: {
|
||||
// en: {
|
||||
// save: 'Remember',
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// eslint: {
|
||||
// /* module options */
|
||||
// },
|
||||
// mapbox: {
|
||||
// accessToken: '{API_KEY}'
|
||||
// },
|
||||
// pwa: {
|
||||
// /* PWA options */
|
||||
// },
|
||||
// vuetify: {
|
||||
// /* vuetify options */
|
||||
// // vuetifyOptions: {
|
||||
// // // @TODO: list all vuetify options
|
||||
// // },
|
||||
|
||||
// moduleOptions: {
|
||||
// /* nuxt-vuetify module options */
|
||||
// treeshaking: true,
|
||||
// useIconCDN: false,
|
||||
|
||||
// /* vite-plugin-vuetify options */
|
||||
// styles: 'sass',
|
||||
// autoImport: true,
|
||||
// useVuetifyLabs: true,
|
||||
// }
|
||||
// }
|
||||
})
|
||||
45
package.json
Normal file
45
package.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxi build",
|
||||
"dev": "nuxi dev",
|
||||
"generate": "nuxi generate",
|
||||
"preview": "nuxi preview",
|
||||
"postinstall": "nuxi prepare"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/devtools": "latest",
|
||||
"@types/jest": "^29.5.3",
|
||||
"@types/node": "^18.17.3",
|
||||
"@vue/test-utils": "^2.4.0-alpha.2",
|
||||
"@vue/vue3-jest": "^29.2.5",
|
||||
"eslint": "^8.47.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dargmuesli/nuxt-cookie-control": "^6.4.0",
|
||||
"@invictus.codes/nuxt-vuetify": "^0.3.0",
|
||||
"@nuxt/devalue": "^2.0.2",
|
||||
"@nuxt/image": "^0.7.1",
|
||||
"@nuxt/kit": "^3.5.5",
|
||||
"@nuxtjs/eslint-module": "^4.1.0",
|
||||
"@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
|
||||
"@pinia/nuxt": "^0.4.11",
|
||||
"@vite-pwa/nuxt": "^0.1.0",
|
||||
"graphql": "^16.0.0",
|
||||
"graphql-tag": "^2.0.0",
|
||||
"nuxt": "^3.6.5",
|
||||
"nuxt-graphql-client": "^0.2.30",
|
||||
"nuxt-icon": "^0.5.0",
|
||||
"nuxt-mapbox": "^1.4.3",
|
||||
"nuxt-time": "^0.1.1",
|
||||
"sass": "^1.66.1",
|
||||
"vite": "^4.4.9",
|
||||
"vite-plugin-pwa": ">=0.16.3 <1",
|
||||
"vue": "^3.3.4",
|
||||
"vue-email": "^0.6.6",
|
||||
"webpack": "^5.88.2",
|
||||
"workbox-build": "^7.0.0",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
}
|
||||
3
pages/index.vue
Normal file
3
pages/index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>Index page</h1>
|
||||
</template>
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user