├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── 🐞-bug-report.md │ └── 💡-feature-request.md ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── apps ├── cms │ ├── .env.example │ ├── .gitignore │ ├── .npmrc │ ├── Dockerfile │ ├── README.md │ ├── docker-compose.yml │ ├── nodemon.json │ ├── package.json │ ├── src │ │ ├── collections │ │ │ ├── Media.ts │ │ │ ├── Pages.ts │ │ │ ├── Posts.ts │ │ │ └── Users.ts │ │ ├── payload.config.ts │ │ └── server.ts │ └── tsconfig.json └── website │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── app.vue │ ├── composables │ ├── useCms.ts │ └── useFetchWithCache.ts │ ├── layouts │ └── default.vue │ ├── nuxt.config.ts │ ├── package.json │ ├── pages │ └── index.vue │ ├── public │ └── favicon.ico │ ├── tsconfig.json │ └── types.ts ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── turbo.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-custom` 4 | extends: ["custom"], 5 | settings: { 6 | next: { 7 | rootDir: ["apps/*/"], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/🐞-bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41E Bug report" 3 | about: Create a report to help improve the template 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/💡-feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F4A1 Feature request" 3 | about: Suggest an idea for the template 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .pnpm-debug.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # turbo 33 | .turbo 34 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | auto-install-peers=true -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2023 Sigve Hansen 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt + Payload monorepo boilerplate 2 | 3 | A monorepo boilerplate using Nuxt and Payload. 4 | 5 | ## Why? 6 | 7 | I was interested in using Payload as the CMS for a website project with Nuxt, but there were no good examples on how to setup a project with that specific tech stack. 8 | I found [a pretty nice template](https://github.com/slavanossar/nuxt3-payload-template), but I specifically wanted to use a monorepo setup. 9 | 10 | ## Tech stack 11 | 12 | - Turborepo 13 | Makes working with a monorepo a breeze. 14 | 15 | - Nuxt 16 | Full-stack framework for Vue 3. 17 | 18 | - Payload 19 | An extensible CMS with great developer experience. 20 | 21 | ## Setup 22 | 23 | This project uses [pnpm](https://pnpm.io). 24 | Navigate to the root of the monorepo and run the following command. 25 | 26 | ```sh 27 | pnpm install 28 | ``` 29 | 30 | ## Development 31 | 32 | Navigate to the root of the monorepo and run the following command. 33 | 34 | ```sh 35 | pnpm run dev 36 | ``` 37 | 38 | This will run both the Nuxt and Payload apps in parallel. 39 | 40 | ## License 41 | 42 | This project is licensed under [MIT](/LICENSE). 43 | -------------------------------------------------------------------------------- /apps/cms/.env.example: -------------------------------------------------------------------------------- 1 | PORT=3000 2 | MONGODB_URI= 3 | PAYLOAD_SECRET= -------------------------------------------------------------------------------- /apps/cms/.gitignore: -------------------------------------------------------------------------------- 1 | ### Node ### 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | lerna-debug.log* 9 | .pnpm-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # Snowpack dependency directory (https://snowpack.dev/) 47 | web_modules/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Optional stylelint cache 59 | .stylelintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variable files 77 | .env 78 | .env.development.local 79 | .env.test.local 80 | .env.production.local 81 | .env.local 82 | 83 | # parcel-bundler cache (https://parceljs.org/) 84 | .cache 85 | .parcel-cache 86 | 87 | # Next.js build output 88 | .next 89 | out 90 | 91 | # Nuxt.js build / generate output 92 | .nuxt 93 | dist 94 | 95 | # Gatsby files 96 | .cache/ 97 | # Comment in the public line in if your project uses Gatsby and not Next.js 98 | # https://nextjs.org/blog/next-9-1#public-directory-support 99 | # public 100 | 101 | # vuepress build output 102 | .vuepress/dist 103 | 104 | # vuepress v2.x temp and cache directory 105 | .temp 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | ### Node Patch ### 133 | # Serverless Webpack directories 134 | .webpack/ 135 | 136 | # Optional stylelint cache 137 | 138 | # SvelteKit build / generate output 139 | .svelte-kit 140 | 141 | ### VisualStudioCode ### 142 | .vscode/* 143 | !.vscode/settings.json 144 | !.vscode/tasks.json 145 | !.vscode/launch.json 146 | !.vscode/extensions.json 147 | !.vscode/*.code-snippets 148 | 149 | # Local History for Visual Studio Code 150 | .history/ 151 | 152 | # Built Visual Studio Code Extensions 153 | *.vsix 154 | 155 | ### VisualStudioCode Patch ### 156 | # Ignore all local history of files 157 | .history 158 | .ionide 159 | 160 | # Support for Project snippet scope 161 | .vscode/*.code-snippets 162 | 163 | # Ignore code-workspaces 164 | *.code-workspace 165 | 166 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 167 | 168 | media 169 | build -------------------------------------------------------------------------------- /apps/cms/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /apps/cms/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18.8-alpine as base 2 | 3 | FROM base as builder 4 | 5 | WORKDIR /home/node/app 6 | COPY package*.json ./ 7 | 8 | COPY . . 9 | RUN yarn install 10 | RUN yarn build 11 | 12 | FROM base as runtime 13 | 14 | ENV NODE_ENV=production 15 | ENV PAYLOAD_CONFIG_PATH=dist/payload.config.js 16 | 17 | WORKDIR /home/node/app 18 | COPY package*.json ./ 19 | 20 | RUN yarn install --production 21 | COPY --from=builder /home/node/app/dist ./dist 22 | COPY --from=builder /home/node/app/build ./build 23 | 24 | EXPOSE 3000 25 | 26 | CMD ["node", "dist/server.js"] 27 | -------------------------------------------------------------------------------- /apps/cms/README.md: -------------------------------------------------------------------------------- 1 | # cms 2 | 3 | This project was created using create-payload-app using the blank template. 4 | 5 | ## How to Use 6 | 7 | `yarn dev` will start up your application and reload on any changes. 8 | 9 | ### Docker 10 | 11 | If you have docker and docker-compose installed, you can run `docker-compose up` 12 | 13 | To build the docker image, run `docker build -t my-tag .` 14 | 15 | Ensure you are passing all needed environment variables when starting up your container via `--env-file` or setting them with your deployment. 16 | 17 | The 3 typical env vars will be `MONGODB_URI`, `PAYLOAD_SECRET`, and `PAYLOAD_CONFIG_PATH` 18 | 19 | `docker run --env-file .env -p 3000:3000 my-tag` 20 | -------------------------------------------------------------------------------- /apps/cms/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | 3 | services: 4 | 5 | payload: 6 | image: node:18-alpine 7 | ports: 8 | - "3000:3000" 9 | volumes: 10 | - .:/home/node/app 11 | - node_modules:/home/node/app/node_modules 12 | working_dir: /home/node/app/ 13 | command: sh -c "yarn install && yarn dev" 14 | depends_on: 15 | - mongo 16 | environment: 17 | MONGODB_URI: mongodb://mongo:27017/payload 18 | PORT: 3000 19 | NODE_ENV: development 20 | PAYLOAD_SECRET: TESTING 21 | 22 | mongo: 23 | image: mongo:latest 24 | ports: 25 | - "27017:27017" 26 | command: 27 | - --storageEngine=wiredTiger 28 | volumes: 29 | - data:/data/db 30 | logging: 31 | driver: none 32 | 33 | volumes: 34 | data: 35 | node_modules: 36 | -------------------------------------------------------------------------------- /apps/cms/nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "ext": "ts", 3 | "exec": "ts-node src/server.ts" 4 | } 5 | -------------------------------------------------------------------------------- /apps/cms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cms", 3 | "description": "Payload project created from blank template", 4 | "version": "1.0.0", 5 | "main": "dist/server.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon", 9 | "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build", 10 | "build:server": "tsc", 11 | "build": "yarn copyfiles && yarn build:payload && yarn build:server", 12 | "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js", 13 | "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/", 14 | "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types", 15 | "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema" 16 | }, 17 | "dependencies": { 18 | "@payloadcms/plugin-seo": "^1.0.10", 19 | "dotenv": "^8.2.0", 20 | "express": "^4.17.1", 21 | "payload": "^1.6.6", 22 | "payload-blurhash-plugin": "^1.2.0" 23 | }, 24 | "devDependencies": { 25 | "@types/express": "^4.17.9", 26 | "copyfiles": "^2.4.1", 27 | "cross-env": "^7.0.3", 28 | "nodemon": "^2.0.6", 29 | "ts-node": "^9.1.1", 30 | "typescript": "^4.8.4" 31 | } 32 | } -------------------------------------------------------------------------------- /apps/cms/src/collections/Media.ts: -------------------------------------------------------------------------------- 1 | import { CollectionConfig } from 'payload/types'; 2 | import path from 'path'; 3 | 4 | const Media: CollectionConfig = { 5 | slug: 'media', 6 | upload: { 7 | staticDir: path.resolve(__dirname, '../../media'), 8 | }, 9 | fields: [ 10 | { 11 | name: 'alt', 12 | type: 'text', 13 | required: true, 14 | }, 15 | { 16 | name: 'darkModeFallback', 17 | type: 'upload', 18 | relationTo: 'media', 19 | admin: { 20 | description: 'Choose an upload to render if the visitor is using dark mode.' 21 | } 22 | }, 23 | ] 24 | } 25 | 26 | export default Media -------------------------------------------------------------------------------- /apps/cms/src/collections/Pages.ts: -------------------------------------------------------------------------------- 1 | import { CollectionConfig } from 'payload/types'; 2 | 3 | const Pages: CollectionConfig = { 4 | slug: 'pages', 5 | fields: [ 6 | { 7 | name: 'slug', 8 | type: 'text', 9 | required: true, 10 | admin: { 11 | position: 'sidebar' 12 | } 13 | }, 14 | { 15 | name: 'title', 16 | type: 'text', 17 | required: true 18 | }, 19 | { 20 | name: 'content', 21 | type: 'richText' 22 | } 23 | ], 24 | }; 25 | 26 | export default Pages; -------------------------------------------------------------------------------- /apps/cms/src/collections/Posts.ts: -------------------------------------------------------------------------------- 1 | import { CollectionConfig } from 'payload/types'; 2 | 3 | const Posts: CollectionConfig = { 4 | slug: 'posts', 5 | fields: [ 6 | { 7 | name: 'title', 8 | type: 'text', 9 | required: true 10 | }, 11 | { 12 | name: 'content', 13 | type: 'richText' 14 | } 15 | ], 16 | }; 17 | 18 | export default Posts; -------------------------------------------------------------------------------- /apps/cms/src/collections/Users.ts: -------------------------------------------------------------------------------- 1 | import { CollectionConfig } from 'payload/types'; 2 | 3 | const Users: CollectionConfig = { 4 | slug: 'users', 5 | auth: true, 6 | admin: { 7 | useAsTitle: 'email', 8 | }, 9 | access: { 10 | read: () => true, 11 | }, 12 | fields: [ 13 | // Email added by default 14 | // Add more fields as needed 15 | ], 16 | }; 17 | 18 | export default Users; -------------------------------------------------------------------------------- /apps/cms/src/payload.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { buildConfig } from 'payload/config'; 3 | import seo from '@payloadcms/plugin-seo' 4 | import computeBlurhash from 'payload-blurhash-plugin' 5 | 6 | import Users from './collections/Users'; 7 | import Media from './collections/Media'; 8 | import Posts from './collections/Posts'; 9 | import Pages from './collections/Pages'; 10 | 11 | export default buildConfig({ 12 | serverURL: 'http://localhost:3000', 13 | admin: { 14 | user: Users.slug, 15 | }, 16 | collections: [ 17 | Users, 18 | Media, 19 | Posts, 20 | Pages, 21 | ], 22 | typescript: { 23 | outputFile: path.resolve(__dirname, 'payload-types.ts'), 24 | }, 25 | graphQL: { 26 | schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'), 27 | }, 28 | plugins: [ 29 | seo({ 30 | collections: ['posts', 'pages'], 31 | uploadsCollection: 'media', 32 | generateTitle: ({ doc }) => `Nuxt Payload - ${doc?.title?.value}`, 33 | generateDescription: ({ doc }) => doc?.excerpt?.value 34 | }), 35 | computeBlurhash() 36 | ] 37 | }); 38 | -------------------------------------------------------------------------------- /apps/cms/src/server.ts: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import payload from 'payload'; 3 | 4 | require('dotenv').config(); 5 | const app = express(); 6 | 7 | // Redirect root to Admin panel 8 | app.get('/', (_, res) => { 9 | res.redirect('/admin'); 10 | }); 11 | 12 | const start = async () => { 13 | // Initialize Payload 14 | await payload.init({ 15 | secret: process.env.PAYLOAD_SECRET, 16 | mongoURL: process.env.MONGODB_URI, 17 | express: app, 18 | onInit: async () => { 19 | payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`) 20 | }, 21 | }) 22 | 23 | // Add your own express routes here 24 | 25 | app.listen(process.env.PORT); 26 | } 27 | 28 | start(); 29 | -------------------------------------------------------------------------------- /apps/cms/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "strict": false, 11 | "esModuleInterop": true, 12 | "skipLibCheck": true, 13 | "outDir": "./dist", 14 | "rootDir": "./src", 15 | "jsx": "react", 16 | "paths": { 17 | "payload/generated-types": [ 18 | "./src/payload-types.ts", 19 | ], 20 | } 21 | }, 22 | "include": [ 23 | "src" 24 | ], 25 | "exclude": [ 26 | "node_modules", 27 | "dist", 28 | "build", 29 | ], 30 | "ts-node": { 31 | "transpileOnly": true, 32 | "swc": true, 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /apps/website/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | -------------------------------------------------------------------------------- /apps/website/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /apps/website/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /apps/website/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /apps/website/composables/useCms.ts: -------------------------------------------------------------------------------- 1 | export default async function () { 2 | const data = await useFetchWithCache(`${import.meta.env.CMS_URL}/api`) 3 | 4 | return { 5 | data 6 | } 7 | } -------------------------------------------------------------------------------- /apps/website/composables/useFetchWithCache.ts: -------------------------------------------------------------------------------- 1 | import { StorageSerializers } from '@vueuse/core'; 2 | 3 | export default async (url: string) => { 4 | // Use sessionStorage to cache the lesson data 5 | const cached = useSessionStorage(url, null, { 6 | // By passing null as default it can't automatically 7 | // determine which serializer to use 8 | serializer: StorageSerializers.object, 9 | }); 10 | 11 | if (!cached.value) { 12 | const { data, error } = await useFetch(url, { 13 | headers: useRequestHeaders(['cookie']), 14 | }); 15 | 16 | if (error.value) { 17 | throw createError({ 18 | ...error.value, 19 | statusMessage: `Could not fetch data from ${url}`, 20 | }); 21 | } 22 | 23 | cached.value = data.value as T; 24 | } else { 25 | console.log(`Getting value from cache for ${url}`); 26 | } 27 | 28 | return cached; 29 | }; -------------------------------------------------------------------------------- /apps/website/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | -------------------------------------------------------------------------------- /apps/website/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: ['@vueuse/nuxt', '@nuxt/devtools'], 4 | runtimeConfig: { 5 | public: { 6 | cmsUrl: 'http://localhost:3000' 7 | } 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /apps/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "private": true, 4 | "scripts": { 5 | "build": "nuxt build", 6 | "dev": "nuxt dev", 7 | "generate": "nuxt generate", 8 | "preview": "nuxt preview", 9 | "postinstall": "nuxt prepare" 10 | }, 11 | "devDependencies": { 12 | "@nuxt/devtools": "^0.1.0", 13 | "nuxt": "^3.2.0" 14 | }, 15 | "dependencies": { 16 | "@vueuse/core": "^9.12.0", 17 | "@vueuse/nuxt": "^9.12.0" 18 | } 19 | } -------------------------------------------------------------------------------- /apps/website/pages/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | -------------------------------------------------------------------------------- /apps/website/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sifferhans/nuxt-payload-boilerplate/69227a69ea8a1e804bc2e025b47e6b0e68e1501e/apps/website/public/favicon.ico -------------------------------------------------------------------------------- /apps/website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /apps/website/types.ts: -------------------------------------------------------------------------------- 1 | export type Post = { 2 | id: string 3 | title: string 4 | content: Array<{ 5 | type: string 6 | chrildren: { text: string }[] 7 | }> 8 | } 9 | 10 | export type Posts = { 11 | docs: Post[] 12 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website-nuxt-payload", 3 | "version": "0.0.0", 4 | "private": true, 5 | "workspaces": [ 6 | "apps/*", 7 | "packages/*" 8 | ], 9 | "scripts": { 10 | "build": "turbo run build", 11 | "dev": "turbo run dev", 12 | "lint": "turbo run lint", 13 | "format": "prettier --write \"**/*.{ts,tsx,md}\"" 14 | }, 15 | "devDependencies": { 16 | "prettier": "latest", 17 | "turbo": "latest" 18 | }, 19 | "engines": { 20 | "node": ">=14.0.0" 21 | }, 22 | "dependencies": {}, 23 | "packageManager": "pnpm@7.16.1" 24 | } -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'packages/*' 4 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "globalDependencies": ["**/.env.*local"], 4 | "pipeline": { 5 | "build": { 6 | "dependsOn": ["^build"], 7 | "outputs": ["dist/**", ".next/**"] 8 | }, 9 | "lint": { 10 | "outputs": [] 11 | }, 12 | "dev": { 13 | "cache": false 14 | } 15 | } 16 | } 17 | --------------------------------------------------------------------------------