├── src ├── App.vue ├── input.css ├── assets │ └── vue.svg ├── components │ └── HelloWorld.vue ├── main.js └── views │ ├── Login.vue │ └── Home.vue ├── .vscode └── extensions.json ├── postcss.config.cjs ├── tailwind.config.cjs ├── vite.config.js ├── .gitignore ├── README.md ├── index.html ├── package.json └── public └── vite.svg /src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /src/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | body { 7 | font-family: 'montserrat', sans-serif; 8 | @apply bg-slate-800 text-white; 9 | } 10 | 11 | main { 12 | @apply p-6; 13 | } 14 | } -------------------------------------------------------------------------------- /.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 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-note", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@apollo/client": "^3.7.2", 13 | "@nhost/apollo": "^0.5.36", 14 | "@nhost/vue": "^0.6.2", 15 | "@vue/apollo-composable": "^4.0.0-beta.1", 16 | "graphql": "^16.6.0", 17 | "vue": "^3.2.41", 18 | "vue-router": "^4.1.6" 19 | }, 20 | "devDependencies": { 21 | "@vitejs/plugin-vue": "^3.2.0", 22 | "autoprefixer": "^10.4.13", 23 | "postcss": "^8.4.19", 24 | "tailwindcss": "^3.2.4", 25 | "vite": "^3.2.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 41 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { createRouter, createWebHistory } from 'vue-router' 3 | import { NhostClient } from '@nhost/vue' 4 | import { createApolloClient } from '@nhost/apollo' 5 | import { DefaultApolloClient } from '@vue/apollo-composable' 6 | import App from './App.vue' 7 | import './input.css' 8 | 9 | const nhost = new NhostClient({ 10 | backendUrl: 'https://ecqpqaotkjzwjdrrgrjw.nhost.run' 11 | }) 12 | 13 | const apolloClient = createApolloClient({ nhost }) 14 | 15 | const router = createRouter({ 16 | history: createWebHistory(), 17 | routes: [ 18 | { 19 | path: '/', 20 | name: 'home', 21 | component: () => import('./views/Home.vue'), 22 | meta: { 23 | protected: true 24 | } 25 | }, 26 | { 27 | path: '/login', 28 | name: 'login', 29 | component: () => import('./views/Login.vue') 30 | } 31 | ] 32 | }) 33 | 34 | router.beforeEach(async (to, from, next) => { 35 | if (to.matched.some(record => record.meta.protected)) { 36 | const isAuthenticated = await nhost.auth.isAuthenticatedAsync() 37 | 38 | if (isAuthenticated) { 39 | next() 40 | } else { 41 | next('/login') 42 | } 43 | } else { 44 | next() 45 | } 46 | }) 47 | 48 | createApp(App).provide(DefaultApolloClient, apolloClient) 49 | .use(nhost).use(router).mount('#app') 50 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/Login.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 92 | 93 | --------------------------------------------------------------------------------