├── .npmrc ├── .env.example ├── public ├── robots.txt ├── favicon.ico └── favicons │ ├── favicon.ico │ ├── mstile-70x70.png │ ├── pwa-192x192.png │ ├── pwa-512x512.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ └── android-chrome-512x512.png ├── .prettierrc.json ├── src ├── composables │ └── useId.ts ├── assets │ └── tailwind.css ├── App.vue ├── components │ ├── Container │ │ ├── ContainerOuter.vue │ │ ├── ContainerInner.vue │ │ ├── index.ts │ │ └── Container.vue │ ├── index │ │ ├── ToolsSection.vue │ │ └── Tool.vue │ ├── elements │ │ └── Section.vue │ └── SimpleLayout.vue ├── symbols │ └── injectionSymbols.ts ├── layouts │ ├── components │ │ ├── NavLink.vue │ │ ├── MobileNavItem.vue │ │ ├── AvatarContainer.vue │ │ ├── DesktopNavigation.vue │ │ ├── Header.vue │ │ ├── NavItem.vue │ │ ├── Footer.vue │ │ └── MobileNavigation.vue │ └── default.vue ├── lib │ └── pb.ts ├── stores │ └── counter.ts ├── pages │ ├── About.vue │ └── Index.vue ├── main.ts ├── components.d.ts └── auto-imports.d.ts ├── vercel.json ├── .vscode └── extensions.json ├── postcss.config.js ├── env.d.ts ├── tsconfig.config.json ├── backend ├── cmd │ └── server │ │ └── main.go ├── build │ └── Dockerfile ├── fly.toml └── go.mod ├── .gitignore ├── tailwind.config.js ├── .eslintrc.cjs ├── tsconfig.json ├── index.html ├── .eslintrc-auto-import.json ├── package.json ├── vite.config.ts └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_URL="http://127.0.0.1:8090" -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "plugins": ["prettier-plugin-tailwindcss"] 4 | } 5 | -------------------------------------------------------------------------------- /src/composables/useId.ts: -------------------------------------------------------------------------------- 1 | let id = 0 2 | export const useId = () => { 3 | return id++ 4 | } 5 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [{ "source": "/:path*", "destination": "/index.html" }] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/favicon.ico -------------------------------------------------------------------------------- /src/assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | -------------------------------------------------------------------------------- /public/favicons/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/mstile-70x70.png -------------------------------------------------------------------------------- /public/favicons/pwa-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/pwa-192x192.png -------------------------------------------------------------------------------- /public/favicons/pwa-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/pwa-512x512.png -------------------------------------------------------------------------------- /public/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicons/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/mstile-144x144.png -------------------------------------------------------------------------------- /public/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /public/favicons/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/mstile-310x150.png -------------------------------------------------------------------------------- /public/favicons/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/mstile-310x310.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | -------------------------------------------------------------------------------- /public/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roguesherlock/vue-pocketbase-template/HEAD/public/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/components/Container/ContainerOuter.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/index/ToolsSection.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/Container/ContainerInner.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/symbols/injectionSymbols.ts: -------------------------------------------------------------------------------- 1 | import type { InjectionKey } from "vue" 2 | import type PocketBase from "pocketbase" 3 | 4 | export const pocketBaseSymbol: InjectionKey = Symbol("PBClient") 5 | -------------------------------------------------------------------------------- /src/components/Container/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ContainerInner } from "./ContainerInner.vue" 2 | export { default as ContainerOuter } from "./ContainerOuter.vue" 3 | export { default as Container } from "./Container.vue" 4 | -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | interface ImportMetaEnv { 5 | readonly VITE_API_URL: string 6 | // more env variables... 7 | } 8 | 9 | interface ImportMeta { 10 | readonly env: ImportMetaEnv 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.node.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "playwright.config.*" 8 | ], 9 | "compilerOptions": { 10 | "composite": true, 11 | "types": ["node"] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/layouts/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | -------------------------------------------------------------------------------- /src/components/Container/Container.vue: -------------------------------------------------------------------------------- 1 | 5 | 12 | -------------------------------------------------------------------------------- /src/lib/pb.ts: -------------------------------------------------------------------------------- 1 | import PocketBase from "pocketbase" 2 | 3 | export const pb = new PocketBase(import.meta.env.VITE_API_URL) 4 | 5 | async function runGracefully(fn: () => Promise) { 6 | try { 7 | const result = await fn() 8 | return result 9 | } catch (e) { 10 | console.warn(e) 11 | return null 12 | } 13 | } 14 | export default pb 15 | -------------------------------------------------------------------------------- /backend/cmd/server/main.go: -------------------------------------------------------------------------------- 1 | // main.go 2 | package main 3 | 4 | import ( 5 | "log" 6 | 7 | "github.com/pocketbase/pocketbase" 8 | ) 9 | 10 | var version string // do not remove or change 11 | 12 | func main() { 13 | app := pocketbase.New() 14 | 15 | if err := app.Start(); err != nil { 16 | log.Fatal("version: ", version, "\n", err) 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/stores/counter.ts: -------------------------------------------------------------------------------- 1 | import { ref, computed } from "vue" 2 | import { defineStore } from "pinia" 3 | 4 | export const useCounterStore = defineStore("counter", () => { 5 | const count = ref(0) 6 | const doubleCount = computed(() => count.value * 2) 7 | function increment() { 8 | count.value++ 9 | } 10 | 11 | return { count, doubleCount, increment } 12 | }) 13 | -------------------------------------------------------------------------------- /src/layouts/components/MobileNavItem.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | -------------------------------------------------------------------------------- /src/layouts/components/AvatarContainer.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | .env 30 | pb_data -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const defaultTheme = require("tailwindcss/defaultTheme.js") 3 | module.exports = { 4 | content: ["./src/**/*.{vue,js,ts,css,html}", "./index.html"], 5 | darkMode: "class", 6 | theme: { 7 | extend: { 8 | fontFamily: { 9 | sans: ["InterVariable", ...defaultTheme.fontFamily.sans], 10 | }, 11 | }, 12 | }, 13 | plugins: [ 14 | require("@tailwindcss/typography"), 15 | require("@headlessui/tailwindcss"), 16 | ], 17 | } 18 | -------------------------------------------------------------------------------- /backend/build/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM golang:1.19-buster AS builder 2 | WORKDIR /src 3 | 4 | ENV GOPROXY=https://proxy.golang.org|direct 5 | COPY go.mod go.sum ./ 6 | RUN go mod download -x 7 | 8 | COPY . ./ 9 | RUN GOOS=linux GOARCH=amd64 go build -ldflags="-X 'main.release=`git rev-parse --short=8 HEAD`'" -o /bin/server cmd/server/*.go 10 | 11 | # FROM gcr.io/distroless/base-debian11 12 | FROM debian:latest 13 | WORKDIR /app 14 | 15 | COPY --from=builder /bin/server ./ 16 | 17 | EXPOSE 8080 18 | 19 | CMD ["./server", "serve", "--http=0.0.0.0:8080"] -------------------------------------------------------------------------------- /src/layouts/components/DesktopNavigation.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require("@rushstack/eslint-patch/modern-module-resolution") 3 | 4 | module.exports = { 5 | root: true, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/eslint-config-typescript", 10 | "@vue/eslint-config-prettier", 11 | "./.eslintrc-auto-import.json", 12 | ], 13 | rules: { 14 | // override/add rules settings here, such as: 15 | // "vue/no-unused-vars": "error", 16 | "vue/multi-word-component-names": "off", 17 | }, 18 | parserOptions: { 19 | ecmaVersion: "latest", 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "compilerOptions": { 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./src/*"] 8 | }, 9 | "types": [ 10 | "vue/ref-macros", 11 | "vite-plugin-pages/client", 12 | "vite-plugin-vue-layouts/client", 13 | "vite-plugin-pwa/client", 14 | "unplugin-vue-macros/macros-global" 15 | ] 16 | }, 17 | "vueCompilerOptions": { 18 | "plugins": [ 19 | "@vue-macros/volar/define-model", 20 | "@vue-macros/volar/define-slots" 21 | ] 22 | }, 23 | 24 | "references": [ 25 | { 26 | "path": "./tsconfig.config.json" 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /src/components/elements/Section.vue: -------------------------------------------------------------------------------- 1 | 10 | 30 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/components/SimpleLayout.vue: -------------------------------------------------------------------------------- 1 | 9 | 36 | -------------------------------------------------------------------------------- /src/layouts/components/Header.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /backend/fly.toml: -------------------------------------------------------------------------------- 1 | app = "INSERT_YOUR_APP_NAME_HERE" 2 | kill_signal = "SIGINT" 3 | kill_timeout = 5 4 | processes = [] 5 | 6 | 7 | [env] 8 | 9 | [build] 10 | dockerfile = "build/Dockerfile" 11 | 12 | [experimental] 13 | allowed_public_ports = [] 14 | auto_rollback = true 15 | 16 | [mounts] 17 | source = "pb_data" 18 | destination = "/app/pb_data" 19 | 20 | [[services]] 21 | http_checks = [] 22 | internal_port = 8080 23 | processes = ["app"] 24 | protocol = "tcp" 25 | script_checks = [] 26 | [services.concurrency] 27 | hard_limit = 25 28 | soft_limit = 20 29 | type = "connections" 30 | 31 | [[services.ports]] 32 | force_https = true 33 | handlers = ["http"] 34 | port = 80 35 | 36 | [[services.ports]] 37 | handlers = ["tls", "http"] 38 | port = 443 39 | 40 | [[services.tcp_checks]] 41 | grace_period = "1s" 42 | interval = "15s" 43 | restart_limit = 0 44 | timeout = "2s" 45 | -------------------------------------------------------------------------------- /src/components/index/Tool.vue: -------------------------------------------------------------------------------- 1 | 8 | 37 | -------------------------------------------------------------------------------- /src/layouts/components/NavItem.vue: -------------------------------------------------------------------------------- 1 | 10 | 39 | -------------------------------------------------------------------------------- /src/layouts/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /src/pages/About.vue: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 15 | 21 | 27 | 28 | 29 | 30 | YOUR_APP_TITLE 31 | 32 | 33 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue" 2 | import { createPinia } from "pinia" 3 | import { VueQueryPlugin } from "@tanstack/vue-query" 4 | import { persistQueryClient } from "@tanstack/query-persist-client-core" 5 | import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister" 6 | import type { VueQueryPluginOptions } from "@tanstack/vue-query" 7 | import App from "@/App.vue" 8 | import { createRouter, createWebHistory } from "vue-router" 9 | import { setupLayouts } from "virtual:generated-layouts" 10 | import generatedRoutes from "virtual:generated-pages" 11 | import { pocketBaseSymbol } from "@/symbols/injectionSymbols" 12 | import { createHead } from "@vueuse/head" 13 | import "@/assets/tailwind.css" 14 | import "@fontsource/inter/variable.css" 15 | 16 | const routes = setupLayouts(generatedRoutes) 17 | const router = createRouter({ 18 | history: createWebHistory(import.meta.env.BASE_URL), 19 | routes: routes, 20 | }) 21 | 22 | const vueQueryOptions: VueQueryPluginOptions = { 23 | queryClientConfig: { 24 | defaultOptions: { 25 | queries: { 26 | cacheTime: 1000 * 60 * 60 * 24, // 24 hours 27 | staleTime: 1000 * 60 * 5, // 5 minutes 28 | }, 29 | }, 30 | }, 31 | clientPersister: (queryClient) => { 32 | return persistQueryClient({ 33 | queryClient, 34 | persister: createSyncStoragePersister({ storage: localStorage }), 35 | }) 36 | }, 37 | } 38 | 39 | const app = createApp(App) 40 | 41 | app.use(createHead()) 42 | app.use(createPinia()) 43 | app.use(router) 44 | app.use(VueQueryPlugin, vueQueryOptions) 45 | app.provide(pocketBaseSymbol, pb) 46 | 47 | app.mount("#app") 48 | -------------------------------------------------------------------------------- /.eslintrc-auto-import.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "$": true, 4 | "$$": true, 5 | "$computed": true, 6 | "$customRef": true, 7 | "$ref": true, 8 | "$shallowRef": true, 9 | "$toRef": true, 10 | "EffectScope": true, 11 | "computed": true, 12 | "createApp": true, 13 | "customRef": true, 14 | "defineAsyncComponent": true, 15 | "defineComponent": true, 16 | "effectScope": true, 17 | "getCurrentInstance": true, 18 | "getCurrentScope": true, 19 | "h": true, 20 | "inject": true, 21 | "isProxy": true, 22 | "isReactive": true, 23 | "isReadonly": true, 24 | "isRef": true, 25 | "markRaw": true, 26 | "nextTick": true, 27 | "onActivated": true, 28 | "onBeforeMount": true, 29 | "onBeforeRouteLeave": true, 30 | "onBeforeRouteUpdate": true, 31 | "onBeforeUnmount": true, 32 | "onBeforeUpdate": true, 33 | "onDeactivated": true, 34 | "onErrorCaptured": true, 35 | "onMounted": true, 36 | "onRenderTracked": true, 37 | "onRenderTriggered": true, 38 | "onScopeDispose": true, 39 | "onServerPrefetch": true, 40 | "onUnmounted": true, 41 | "onUpdated": true, 42 | "pb": true, 43 | "provide": true, 44 | "reactive": true, 45 | "readonly": true, 46 | "ref": true, 47 | "resolveComponent": true, 48 | "resolveDirective": true, 49 | "shallowReactive": true, 50 | "shallowReadonly": true, 51 | "shallowRef": true, 52 | "toRaw": true, 53 | "toRef": true, 54 | "toRefs": true, 55 | "triggerRef": true, 56 | "unref": true, 57 | "useAttrs": true, 58 | "useCounterStore": true, 59 | "useCssModule": true, 60 | "useCssVars": true, 61 | "useHead": true, 62 | "useId": true, 63 | "useLink": true, 64 | "useRoute": true, 65 | "useRouter": true, 66 | "useSlots": true, 67 | "watch": true, 68 | "watchEffect": true, 69 | "watchPostEffect": true, 70 | "watchSyncEffect": true 71 | } 72 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-pocketbase-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "run-p type-check build-only", 8 | "preview": "vite preview", 9 | "build-only": "vite build", 10 | "type-check": "vue-tsc --noEmit", 11 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" 12 | }, 13 | "dependencies": { 14 | "@fontsource/inter": "^4.5.14", 15 | "@headlessui/vue": "^1.7.7", 16 | "@tanstack/query-persist-client-core": "^4.20.4", 17 | "@tanstack/query-sync-storage-persister": "^4.20.4", 18 | "@tanstack/vue-query": "^4.20.5", 19 | "@vueuse/head": "^1.0.22", 20 | "motion": "^10.15.3", 21 | "pinia": "^2.0.28", 22 | "pocketbase": "^0.9.1", 23 | "vue": "^3.2.45", 24 | "vue-router": "^4.1.6" 25 | }, 26 | "devDependencies": { 27 | "@headlessui/tailwindcss": "^0.1.2", 28 | "@iconify-json/heroicons": "^1.1.8", 29 | "@rushstack/eslint-patch": "^1.1.4", 30 | "@tailwindcss/typography": "^0.5.8", 31 | "@types/node": "^18.11.12", 32 | "@vitejs/plugin-vue": "^4.0.0", 33 | "@vue-macros/volar": "^0.5.10", 34 | "@vue/eslint-config-prettier": "^7.0.0", 35 | "@vue/eslint-config-typescript": "^11.0.0", 36 | "@vue/tsconfig": "^0.1.3", 37 | "autoprefixer": "^10.4.13", 38 | "eslint": "^8.22.0", 39 | "eslint-plugin-vue": "^9.3.0", 40 | "npm-run-all": "^4.1.5", 41 | "postcss": "^8.4.20", 42 | "prettier": "^2.4.1", 43 | "prettier-plugin-tailwindcss": "^0.2.1", 44 | "tailwindcss": "^3.2.4", 45 | "typescript": "~4.7.4", 46 | "unplugin-auto-import": "^0.12.1", 47 | "unplugin-icons": "^0.15.1", 48 | "unplugin-vue-components": "^0.22.12", 49 | "unplugin-vue-macros": "^1.3.2", 50 | "vite": "^4.0.0", 51 | "vite-plugin-pages": "^0.28.0", 52 | "vite-plugin-pwa": "^0.14.0", 53 | "vite-plugin-vue-layouts": "^0.7.0", 54 | "vue-tsc": "^1.0.12" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | // generated by unplugin-vue-components 2 | // We suggest you to commit this file into source control 3 | // Read more: https://github.com/vuejs/core/pull/3399 4 | import '@vue/runtime-core' 5 | 6 | export {} 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | AvatarContainer: typeof import('./layouts/components/AvatarContainer.vue')['default'] 11 | Container: typeof import('./components/Container/Container.vue')['default'] 12 | ContainerInner: typeof import('./components/Container/ContainerInner.vue')['default'] 13 | ContainerOuter: typeof import('./components/Container/ContainerOuter.vue')['default'] 14 | DesktopNavigation: typeof import('./layouts/components/DesktopNavigation.vue')['default'] 15 | Footer: typeof import('./layouts/components/Footer.vue')['default'] 16 | Head: typeof import('@vueuse/head')['Head'] 17 | Header: typeof import('./layouts/components/Header.vue')['default'] 18 | IHeroiconsChevronDown: typeof import('~icons/heroicons/chevron-down')['default'] 19 | IHeroiconsXMark: typeof import('~icons/heroicons/x-mark')['default'] 20 | MobileNavigation: typeof import('./layouts/components/MobileNavigation.vue')['default'] 21 | MobileNavItem: typeof import('./layouts/components/MobileNavItem.vue')['default'] 22 | NavItem: typeof import('./layouts/components/NavItem.vue')['default'] 23 | NavLink: typeof import('./layouts/components/NavLink.vue')['default'] 24 | Popover: typeof import('@headlessui/vue')['Popover'] 25 | PopoverButton: typeof import('@headlessui/vue')['PopoverButton'] 26 | PopoverOverlay: typeof import('@headlessui/vue')['PopoverOverlay'] 27 | PopoverPanel: typeof import('@headlessui/vue')['PopoverPanel'] 28 | RouterLink: typeof import('vue-router')['RouterLink'] 29 | RouterView: typeof import('vue-router')['RouterView'] 30 | Section: typeof import('./components/elements/Section.vue')['default'] 31 | SimpleLayout: typeof import('./components/SimpleLayout.vue')['default'] 32 | Tool: typeof import('./components/index/Tool.vue')['default'] 33 | ToolsSection: typeof import('./components/index/ToolsSection.vue')['default'] 34 | TransitionChild: typeof import('@headlessui/vue')['TransitionChild'] 35 | TransitionRoot: typeof import('@headlessui/vue')['TransitionRoot'] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from "node:url" 2 | 3 | import Layouts from "vite-plugin-vue-layouts" 4 | import Pages from "vite-plugin-pages" 5 | import AutoImport from "unplugin-auto-import/vite" 6 | import Icons from "unplugin-icons/vite" 7 | import IconsResolver from "unplugin-icons/resolver" 8 | import { HeadlessUiResolver } from "unplugin-vue-components/resolvers" 9 | import Components from "unplugin-vue-components/vite" 10 | import { defineConfig } from "vite" 11 | import Vue from "@vitejs/plugin-vue" 12 | import VueMacros from "unplugin-vue-macros/vite" 13 | import { VitePWA } from "vite-plugin-pwa" 14 | 15 | // https://vitejs.dev/config/ 16 | export default defineConfig({ 17 | plugins: [ 18 | // https://github.com/sxzz/unplugin-vue-macros 19 | VueMacros({ 20 | plugins: { 21 | vue: Vue({ 22 | reactivityTransform: true, 23 | }), 24 | }, 25 | }), 26 | 27 | // https://github.com/hannoeru/vite-plugin-pages 28 | Pages({ 29 | extensions: ["vue"], 30 | }), 31 | 32 | // https://github.com/JohnCampionJr/vite-plugin-vue-layouts 33 | Layouts(), 34 | 35 | // https://github.com/antfu/unplugin-auto-import 36 | AutoImport({ 37 | imports: ["vue", "vue-router", "vue/macros", "@vueuse/head"], 38 | dts: "src/auto-imports.d.ts", 39 | dirs: ["src/composables", "src/stores", "src/lib"], 40 | vueTemplate: true, 41 | eslintrc: { 42 | enabled: true, 43 | }, 44 | }), 45 | 46 | // https://github.com/antfu/unplugin-vue-components 47 | Components({ 48 | extensions: ["vue"], 49 | include: [/\.vue$/, /\.vue\?vue/], 50 | dirs: ["src/components", "src/layouts/components"], 51 | resolvers: [ 52 | HeadlessUiResolver(), 53 | IconsResolver(), 54 | (componentName) => { 55 | // where `componentName` is always CapitalCase 56 | if (componentName === "Head") 57 | return { name: componentName, from: "@vueuse/head" } 58 | }, 59 | ], 60 | dts: "src/components.d.ts", 61 | }), 62 | 63 | //https://github.com/antfu/unplugin-icons 64 | Icons({ 65 | autoInstall: true, 66 | }), 67 | 68 | // https://github.com/antfu/vite-plugin-pwa 69 | VitePWA({ 70 | registerType: "autoUpdate", 71 | workbox: { 72 | maximumFileSizeToCacheInBytes: 30000000, // ~30Mib 73 | globPatterns: ["**/*.{js,css,html,ico}"], 74 | }, 75 | includeAssets: ["favicon.ico", "apple-touch-icon.png", "masked-icon.svg"], 76 | manifest: { 77 | name: "YOUR_APP_NAME", 78 | short_name: "YOUR_APP_SHORT_NAME", 79 | description: "YOUR_APP_DESCRIPTION", 80 | theme_color: "#000000", 81 | icons: [ 82 | { 83 | src: "favicons/pwa-192x192.png", 84 | sizes: "192x192", 85 | type: "image/png", 86 | }, 87 | { 88 | src: "favicons/pwa-512x512.png", 89 | sizes: "512x512", 90 | type: "image/png", 91 | }, 92 | { 93 | src: "favicons/pwa-512x512.png", 94 | sizes: "512x512", 95 | type: "image/png", 96 | purpose: "any maskable", 97 | }, 98 | ], 99 | }, 100 | }), 101 | ], 102 | resolve: { 103 | alias: { 104 | "@": fileURLToPath(new URL("./src", import.meta.url)), 105 | }, 106 | }, 107 | }) 108 | -------------------------------------------------------------------------------- /src/layouts/components/MobileNavigation.vue: -------------------------------------------------------------------------------- 1 | 127 | -------------------------------------------------------------------------------- /backend/go.mod: -------------------------------------------------------------------------------- 1 | module github.com/roguesherlock/playground/backend 2 | 3 | go 1.19 4 | 5 | require github.com/pocketbase/pocketbase v0.10.0 6 | 7 | require ( 8 | github.com/AlecAivazis/survey/v2 v2.3.6 // indirect 9 | github.com/asaskevich/govalidator v0.0.0-20210307081110-f21760c49a8d // indirect 10 | github.com/aws/aws-sdk-go v1.44.161 // indirect 11 | github.com/aws/aws-sdk-go-v2 v1.17.3 // indirect 12 | github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.4.10 // indirect 13 | github.com/aws/aws-sdk-go-v2/config v1.18.5 // indirect 14 | github.com/aws/aws-sdk-go-v2/credentials v1.13.5 // indirect 15 | github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.12.21 // indirect 16 | github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.11.44 // indirect 17 | github.com/aws/aws-sdk-go-v2/internal/configsources v1.1.27 // indirect 18 | github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.4.21 // indirect 19 | github.com/aws/aws-sdk-go-v2/internal/ini v1.3.28 // indirect 20 | github.com/aws/aws-sdk-go-v2/internal/v4a v1.0.18 // indirect 21 | github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.9.11 // indirect 22 | github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.1.22 // indirect 23 | github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.9.21 // indirect 24 | github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.13.21 // indirect 25 | github.com/aws/aws-sdk-go-v2/service/s3 v1.29.6 // indirect 26 | github.com/aws/aws-sdk-go-v2/service/sso v1.11.27 // indirect 27 | github.com/aws/aws-sdk-go-v2/service/ssooidc v1.13.10 // indirect 28 | github.com/aws/aws-sdk-go-v2/service/sts v1.17.7 // indirect 29 | github.com/aws/smithy-go v1.13.5 // indirect 30 | github.com/disintegration/imaging v1.6.2 // indirect 31 | github.com/domodwyer/mailyak/v3 v3.3.4 // indirect 32 | github.com/fatih/color v1.13.0 // indirect 33 | github.com/gabriel-vasile/mimetype v1.4.1 // indirect 34 | github.com/ganigeorgiev/fexpr v0.1.1 // indirect 35 | github.com/go-ozzo/ozzo-validation/v4 v4.3.0 // indirect 36 | github.com/golang-jwt/jwt/v4 v4.4.3 // indirect 37 | github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect 38 | github.com/golang/protobuf v1.5.2 // indirect 39 | github.com/google/uuid v1.3.0 // indirect 40 | github.com/google/wire v0.5.0 // indirect 41 | github.com/googleapis/gax-go/v2 v2.7.0 // indirect 42 | github.com/inconshreveable/mousetrap v1.1.0 // indirect 43 | github.com/jmespath/go-jmespath v0.4.0 // indirect 44 | github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect 45 | github.com/labstack/echo/v5 v5.0.0-20220201181537-ed2888cfa198 // indirect 46 | github.com/mattn/go-colorable v0.1.13 // indirect 47 | github.com/mattn/go-isatty v0.0.16 // indirect 48 | github.com/mattn/go-sqlite3 v1.14.16 // indirect 49 | github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d // indirect 50 | github.com/pocketbase/dbx v1.8.0 // indirect 51 | github.com/remyoudompheng/bigfft v0.0.0-20220927061507-ef77025ab5aa // indirect 52 | github.com/spf13/cast v1.5.0 // indirect 53 | github.com/spf13/cobra v1.6.1 // indirect 54 | github.com/spf13/pflag v1.0.5 // indirect 55 | github.com/valyala/bytebufferpool v1.0.0 // indirect 56 | github.com/valyala/fasttemplate v1.2.2 // indirect 57 | go.opencensus.io v0.24.0 // indirect 58 | gocloud.dev v0.27.0 // indirect 59 | golang.org/x/crypto v0.4.0 // indirect 60 | golang.org/x/image v0.2.0 // indirect 61 | golang.org/x/mod v0.7.0 // indirect 62 | golang.org/x/net v0.4.0 // indirect 63 | golang.org/x/oauth2 v0.3.0 // indirect 64 | golang.org/x/sync v0.1.0 // indirect 65 | golang.org/x/sys v0.3.0 // indirect 66 | golang.org/x/term v0.3.0 // indirect 67 | golang.org/x/text v0.5.0 // indirect 68 | golang.org/x/time v0.3.0 // indirect 69 | golang.org/x/tools v0.4.0 // indirect 70 | golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 // indirect 71 | google.golang.org/api v0.105.0 // indirect 72 | google.golang.org/appengine v1.6.7 // indirect 73 | google.golang.org/genproto v0.0.0-20221207170731-23e4bf6bdc37 // indirect 74 | google.golang.org/grpc v1.51.0 // indirect 75 | google.golang.org/protobuf v1.28.1 // indirect 76 | lukechampine.com/uint128 v1.2.0 // indirect 77 | modernc.org/cc/v3 v3.40.0 // indirect 78 | modernc.org/ccgo/v3 v3.16.13 // indirect 79 | modernc.org/libc v1.21.5 // indirect 80 | modernc.org/mathutil v1.5.0 // indirect 81 | modernc.org/memory v1.5.0 // indirect 82 | modernc.org/opt v0.1.3 // indirect 83 | modernc.org/sqlite v1.20.0 // indirect 84 | modernc.org/strutil v1.1.3 // indirect 85 | modernc.org/token v1.1.0 // indirect 86 | ) 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [vue-pocketbase-template](https://vue-pocketbase-template.vercel.app) 2 | 3 | **🚨Important Notes🚨** 4 | 5 | You should probably just use [nuxt](https://nuxt.com/) or [vitesse](https://github.com/antfu/vitesse/tree/main) instead. 6 | 7 | This template should help get you started developing with Vue 3 PWA in Vite, with [pocketbase](https://pocketbase.io) as backend. I've setup to deploy it on [fly.io](https://fly.io) but you can deploy it anywhere. 8 | 9 | ## Stack 10 | 11 | ### Base 12 | 13 | - [Vue 3](https://vuejs.org) 14 | - [Poacketbase](https://pocketbase.io) 15 | - [Typescript](https://www.typescriptlang.org/) 16 | 17 | ### Router / State Management / Data Fetching 18 | 19 | - [Vue Router](https://router.vuejs.org/) 20 | - [Pinia](https://pinia.vuejs.org/) 21 | - [Vue Query](https://tanstack.com/query/v4) 22 | 23 | ### UI 24 | 25 | - [Headless ui](https://headlessui.com) 26 | - [Iconify](https://iconify.design) 27 | - [Motion](https://motion.dev) 28 | 29 | ### CSS / Fonts 30 | 31 | - [Tailwindcss](https://tailwindcss.com) 32 | - [Inter](https://rsms.me/inter) 33 | 34 | ### DX Things 35 | 36 | - [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 37 | - [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) 38 | - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) 39 | - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 40 | - [Vue Macros](https://vue-macros.sxzz.moe) 41 | 42 | ### Miscellaneous 43 | 44 | - [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) 45 | - [@vueuse/head](https://github.com/vueuse/head) 46 | - [prettier](https://prettier.io) 47 | - [eslint](https://eslint.org) 48 | 49 | ## Project Structure 50 | 51 | - `backend`: backend contains all the backend code 52 | - `backend/build`: contains all the build related files. Includes Dockerfile. 53 | - `backend/cmd`: contains all the files that direclty provide commands to the program. This would also include the starting point for our app. 54 | - `src`: contains all the front end source code 55 | - `src/assets`: contains all the assets you want bundled via vite 56 | - `src/components`: contains all the vue components 57 | - `src/composables`: contains all the composables for the app 58 | - `src/layouts`: contains all the layouts and it's components for the app 59 | - `src/lib`: contains all the module level business logic 60 | - `src/main`: main entry point for the app 61 | - `src/pages`: contains all the top level page components for the app 62 | - `src/stores`: contains pinia stores 63 | - `src/symbols`: contains symbols to use via provide/inject vue api 64 | 65 | ## General Conventions 66 | 67 | - `@` is root of your frontend source code. i.e. `./src` 68 | - We use lot of plugins to provide us with nice dx while developing the app. It allows us to just focus on the core part of the app. So try to rely on them for most cases. i.e. you don't really need to import components, core apis, functions etc. It just works. 69 | 70 | ## Deploying 71 | 72 | ## Recommended IDE Setup 73 | 74 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) + [Go](https://marketplace.visualstudio.com/items?itemName=golang.Go) 75 | 76 | ## Type Support for `.vue` Imports in TS 77 | 78 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. 79 | 80 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: 81 | 82 | 1. Disable the built-in TypeScript Extension 83 | 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette 84 | 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 85 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. 86 | 87 | ## Customize configuration 88 | 89 | See [Vite Configuration Reference](https://vitejs.dev/config/). 90 | 91 | ## Project Setup 92 | 93 | ### Vue 94 | 95 | ```sh 96 | pnpm install 97 | ``` 98 | 99 | ### Pocketbase 100 | 101 | ```sh 102 | cd backend 103 | go mod tidy 104 | ``` 105 | 106 | 114 | 115 | ### Compile and Hot-Reload for Development 116 | 117 | ### Vue 118 | 119 | ```sh 120 | pnpm dev 121 | ``` 122 | 123 | ### Pocketbase 124 | 125 | ```sh 126 | cd backend 127 | go run cmd/server/main.go serve 128 | ``` 129 | 130 | > Note that it doesn't hot reload. yet. I'll add a makefile later 131 | 132 | ### Type-Check, Compile and Minify for Production 133 | 134 | ```sh 135 | pnpm build 136 | ``` 137 | 138 | ### Pocketbase 139 | 140 | ```sh 141 | cd backend 142 | go build -o server cmd/server/*.go 143 | ``` 144 | 145 | If you're using flyctl (Highly Recommended!) 146 | 147 | ```sh 148 | cd backend 149 | flyctl deploy --dockerfile build/Dockerfile 150 | ``` 151 | 152 | ### Lint with [ESLint](https://eslint.org/) 153 | 154 | ```sh 155 | pnpm lint 156 | ``` 157 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 159 | -------------------------------------------------------------------------------- /src/auto-imports.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by 'unplugin-auto-import' 2 | export {} 3 | declare global { 4 | const $$: typeof import('vue/macros')['$$'] 5 | const $: typeof import('vue/macros')['$'] 6 | const $computed: typeof import('vue/macros')['$computed'] 7 | const $customRef: typeof import('vue/macros')['$customRef'] 8 | const $ref: typeof import('vue/macros')['$ref'] 9 | const $shallowRef: typeof import('vue/macros')['$shallowRef'] 10 | const $toRef: typeof import('vue/macros')['$toRef'] 11 | const EffectScope: typeof import('vue')['EffectScope'] 12 | const computed: typeof import('vue')['computed'] 13 | const createApp: typeof import('vue')['createApp'] 14 | const customRef: typeof import('vue')['customRef'] 15 | const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] 16 | const defineComponent: typeof import('vue')['defineComponent'] 17 | const effectScope: typeof import('vue')['effectScope'] 18 | const getCurrentInstance: typeof import('vue')['getCurrentInstance'] 19 | const getCurrentScope: typeof import('vue')['getCurrentScope'] 20 | const h: typeof import('vue')['h'] 21 | const inject: typeof import('vue')['inject'] 22 | const isProxy: typeof import('vue')['isProxy'] 23 | const isReactive: typeof import('vue')['isReactive'] 24 | const isReadonly: typeof import('vue')['isReadonly'] 25 | const isRef: typeof import('vue')['isRef'] 26 | const markRaw: typeof import('vue')['markRaw'] 27 | const nextTick: typeof import('vue')['nextTick'] 28 | const onActivated: typeof import('vue')['onActivated'] 29 | const onBeforeMount: typeof import('vue')['onBeforeMount'] 30 | const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] 31 | const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] 32 | const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] 33 | const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] 34 | const onDeactivated: typeof import('vue')['onDeactivated'] 35 | const onErrorCaptured: typeof import('vue')['onErrorCaptured'] 36 | const onMounted: typeof import('vue')['onMounted'] 37 | const onRenderTracked: typeof import('vue')['onRenderTracked'] 38 | const onRenderTriggered: typeof import('vue')['onRenderTriggered'] 39 | const onScopeDispose: typeof import('vue')['onScopeDispose'] 40 | const onServerPrefetch: typeof import('vue')['onServerPrefetch'] 41 | const onUnmounted: typeof import('vue')['onUnmounted'] 42 | const onUpdated: typeof import('vue')['onUpdated'] 43 | const pb: typeof import('./lib/pb')['default'] 44 | const provide: typeof import('vue')['provide'] 45 | const reactive: typeof import('vue')['reactive'] 46 | const readonly: typeof import('vue')['readonly'] 47 | const ref: typeof import('vue')['ref'] 48 | const resolveComponent: typeof import('vue')['resolveComponent'] 49 | const resolveDirective: typeof import('vue')['resolveDirective'] 50 | const shallowReactive: typeof import('vue')['shallowReactive'] 51 | const shallowReadonly: typeof import('vue')['shallowReadonly'] 52 | const shallowRef: typeof import('vue')['shallowRef'] 53 | const toRaw: typeof import('vue')['toRaw'] 54 | const toRef: typeof import('vue')['toRef'] 55 | const toRefs: typeof import('vue')['toRefs'] 56 | const triggerRef: typeof import('vue')['triggerRef'] 57 | const unref: typeof import('vue')['unref'] 58 | const useAttrs: typeof import('vue')['useAttrs'] 59 | const useCounterStore: typeof import('./stores/counter')['useCounterStore'] 60 | const useCssModule: typeof import('vue')['useCssModule'] 61 | const useCssVars: typeof import('vue')['useCssVars'] 62 | const useHead: typeof import('@vueuse/head')['useHead'] 63 | const useId: typeof import('./composables/useId')['useId'] 64 | const useLink: typeof import('vue-router')['useLink'] 65 | const useRoute: typeof import('vue-router')['useRoute'] 66 | const useRouter: typeof import('vue-router')['useRouter'] 67 | const useSlots: typeof import('vue')['useSlots'] 68 | const watch: typeof import('vue')['watch'] 69 | const watchEffect: typeof import('vue')['watchEffect'] 70 | const watchPostEffect: typeof import('vue')['watchPostEffect'] 71 | const watchSyncEffect: typeof import('vue')['watchSyncEffect'] 72 | } 73 | // for vue template auto import 74 | import { UnwrapRef } from 'vue' 75 | declare module 'vue' { 76 | interface ComponentCustomProperties { 77 | readonly $$: UnwrapRef 78 | readonly $: UnwrapRef 79 | readonly $computed: UnwrapRef 80 | readonly $customRef: UnwrapRef 81 | readonly $ref: UnwrapRef 82 | readonly $shallowRef: UnwrapRef 83 | readonly $toRef: UnwrapRef 84 | readonly EffectScope: UnwrapRef 85 | readonly computed: UnwrapRef 86 | readonly createApp: UnwrapRef 87 | readonly customRef: UnwrapRef 88 | readonly defineAsyncComponent: UnwrapRef 89 | readonly defineComponent: UnwrapRef 90 | readonly effectScope: UnwrapRef 91 | readonly getCurrentInstance: UnwrapRef 92 | readonly getCurrentScope: UnwrapRef 93 | readonly h: UnwrapRef 94 | readonly inject: UnwrapRef 95 | readonly isProxy: UnwrapRef 96 | readonly isReactive: UnwrapRef 97 | readonly isReadonly: UnwrapRef 98 | readonly isRef: UnwrapRef 99 | readonly markRaw: UnwrapRef 100 | readonly nextTick: UnwrapRef 101 | readonly onActivated: UnwrapRef 102 | readonly onBeforeMount: UnwrapRef 103 | readonly onBeforeRouteLeave: UnwrapRef 104 | readonly onBeforeRouteUpdate: UnwrapRef 105 | readonly onBeforeUnmount: UnwrapRef 106 | readonly onBeforeUpdate: UnwrapRef 107 | readonly onDeactivated: UnwrapRef 108 | readonly onErrorCaptured: UnwrapRef 109 | readonly onMounted: UnwrapRef 110 | readonly onRenderTracked: UnwrapRef 111 | readonly onRenderTriggered: UnwrapRef 112 | readonly onScopeDispose: UnwrapRef 113 | readonly onServerPrefetch: UnwrapRef 114 | readonly onUnmounted: UnwrapRef 115 | readonly onUpdated: UnwrapRef 116 | readonly pb: UnwrapRef 117 | readonly provide: UnwrapRef 118 | readonly reactive: UnwrapRef 119 | readonly readonly: UnwrapRef 120 | readonly ref: UnwrapRef 121 | readonly resolveComponent: UnwrapRef 122 | readonly resolveDirective: UnwrapRef 123 | readonly shallowReactive: UnwrapRef 124 | readonly shallowReadonly: UnwrapRef 125 | readonly shallowRef: UnwrapRef 126 | readonly toRaw: UnwrapRef 127 | readonly toRef: UnwrapRef 128 | readonly toRefs: UnwrapRef 129 | readonly triggerRef: UnwrapRef 130 | readonly unref: UnwrapRef 131 | readonly useAttrs: UnwrapRef 132 | readonly useCounterStore: UnwrapRef 133 | readonly useCssModule: UnwrapRef 134 | readonly useCssVars: UnwrapRef 135 | readonly useHead: UnwrapRef 136 | readonly useId: UnwrapRef 137 | readonly useLink: UnwrapRef 138 | readonly useRoute: UnwrapRef 139 | readonly useRouter: UnwrapRef 140 | readonly useSlots: UnwrapRef 141 | readonly watch: UnwrapRef 142 | readonly watchEffect: UnwrapRef 143 | readonly watchPostEffect: UnwrapRef 144 | readonly watchSyncEffect: UnwrapRef 145 | } 146 | } 147 | --------------------------------------------------------------------------------