├── .vscode └── extensions.json ├── src ├── style.css ├── axios.js ├── App.vue ├── main.js ├── components │ ├── Home.vue │ ├── ForgotPassword.vue │ ├── ResetPassword.vue │ ├── Nav.vue │ ├── Login.vue │ └── Register.vue ├── router │ └── index.js └── stores │ └── auth.js ├── postcss.config.cjs ├── tailwind.config.cjs ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md └── public └── vite.svg /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/axios.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | axios.defaults.withCredentials = true; 4 | axios.defaults.baseURL = "http://localhost:8000"; 5 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /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 | server: { 8 | port: 3000, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp, markRaw } from "vue"; 2 | import { createPinia } from "pinia"; 3 | import router from "./router"; 4 | 5 | import "./axios"; 6 | import "./style.css"; 7 | import App from "./App.vue"; 8 | 9 | const pinia = createPinia(); 10 | 11 | pinia.use(({ store }) => { 12 | store.router = markRaw(router); 13 | }); 14 | 15 | const app = createApp(App); 16 | app.use(pinia); 17 | app.use(router); 18 | 19 | app.mount("#app"); 20 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-breeze-api", 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 | "axios": "^1.1.3", 13 | "pinia": "^2.0.23", 14 | "vue": "^3.2.41", 15 | "vue-router": "^4.1.6" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^3.2.0", 19 | "autoprefixer": "^10.4.13", 20 | "postcss": "^8.4.18", 21 | "tailwindcss": "^3.2.2", 22 | "vite": "^3.2.3" 23 | } 24 | } 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 ` 8 | -------------------------------------------------------------------------------- /src/stores/auth.js: -------------------------------------------------------------------------------- 1 | import { defineStore } from "pinia"; 2 | import axios from "axios"; 3 | 4 | export const useAuthStore = defineStore("auth", { 5 | state: () => ({ 6 | authUser: null, 7 | authErrors: [], 8 | authStatus: null, 9 | }), 10 | getters: { 11 | user: (state) => state.authUser, 12 | errors: (state) => state.authErrors, 13 | status: (state) => state.authStatus, 14 | }, 15 | actions: { 16 | async getToken() { 17 | await axios.get("/sanctum/csrf-cookie"); 18 | }, 19 | async getUser() { 20 | await this.getToken(); 21 | const data = await axios.get("/api/user"); 22 | this.authUser = data.data; 23 | }, 24 | async handleLogin(data) { 25 | this.authErrors = []; 26 | await this.getToken(); 27 | 28 | try { 29 | await axios.post("/login", { 30 | email: data.email, 31 | password: data.password, 32 | }); 33 | this.router.push("/"); 34 | } catch (error) { 35 | if (error.response.status === 422) { 36 | this.authErrors = error.response.data.errors; 37 | } 38 | } 39 | }, 40 | async handleRegister(data) { 41 | this.authErrors = []; 42 | await this.getToken(); 43 | try { 44 | await axios.post("/register", { 45 | name: data.name, 46 | email: data.email, 47 | password: data.password, 48 | password_confirmation: data.password_confirmation, 49 | }); 50 | this.router.push("/"); 51 | } catch (error) { 52 | if (error.response.status === 422) { 53 | this.authErrors = error.response.data.errors; 54 | } 55 | } 56 | }, 57 | async handleLogout() { 58 | await axios.post("/logout"); 59 | this.authUser = null; 60 | }, 61 | async handleForgotPassword(email) { 62 | this.authErrors = []; 63 | this.getToken(); 64 | try { 65 | const response = await axios.post("/forgot-password", { 66 | email: email, 67 | }); 68 | this.authStatus = response.data.status; 69 | } catch (error) { 70 | if (error.response.status === 422) { 71 | this.authErrors = error.response.data.errors; 72 | } 73 | } 74 | }, 75 | async handleResetPassword(resetData) { 76 | this.authErrors = []; 77 | try { 78 | const response = await axios.post("/reset-password", resetData); 79 | this.authStatus = response.data.status; 80 | } catch (error) { 81 | if (error.response.status === 422) { 82 | this.authErrors = error.response.data.errors; 83 | } 84 | } 85 | }, 86 | }, 87 | }); 88 | -------------------------------------------------------------------------------- /src/components/ResetPassword.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/Login.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/Register.vue: -------------------------------------------------------------------------------- 1 | 14 | --------------------------------------------------------------------------------