├── README.md ├── Vue-Learn-Part-2 ├── public │ └── favicon.ico ├── .vscode │ └── extensions.json ├── .prettierrc.json ├── src │ ├── mixins │ │ └── flash.js │ ├── main.js │ ├── assets │ │ ├── logo.svg │ │ ├── main.css │ │ └── base.css │ ├── composables │ │ ├── useFlash.js │ │ └── useStorage.js │ ├── views │ │ ├── HomeView.vue │ │ ├── AboutView.vue │ │ ├── TextArea.vue │ │ └── FormView.vue │ ├── components │ │ ├── icons │ │ │ ├── IconSupport.vue │ │ │ ├── IconTooling.vue │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ └── IconEcosystem.vue │ │ ├── TabbabaleTextarea.vue │ │ ├── HelloWorld.vue │ │ ├── WelcomeItem.vue │ │ └── TheWelcome.vue │ ├── router │ │ └── index.js │ └── App.vue ├── .eslintrc.cjs ├── index.html ├── .gitignore ├── vite.config.js ├── package.json ├── README.md └── package-lock.json ├── .idea └── .gitignore ├── .gitignore └── LICENSE /README.md: -------------------------------------------------------------------------------- 1 | # Full-Vue-Project -------------------------------------------------------------------------------- /Vue-Learn-Part-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YasinDehfuli/Vue-js-learn/HEAD/Vue-Learn-Part-2/public/favicon.ico -------------------------------------------------------------------------------- /Vue-Learn-Part-2/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "Vue.volar", 4 | "Vue.vscode-typescript-vue-plugin", 5 | "dbaeumer.vscode-eslint", 6 | "esbenp.prettier-vscode" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | # Datasource local storage ignored files 7 | /dataSources/ 8 | /dataSources.local.xml 9 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "semi": false, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "printWidth": 100, 7 | "trailingComma": "none" 8 | } -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/mixins/flash.js: -------------------------------------------------------------------------------- 1 | import swal from 'sweetalert' 2 | export default { 3 | 4 | methods:{ 5 | flash (message){ 6 | return swal('title' ,message, 'success'); 7 | } 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/main.js: -------------------------------------------------------------------------------- 1 | import './assets/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | const app = createApp(App) 8 | 9 | app.use(router) 10 | 11 | app.mount('#app') 12 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/composables/useFlash.js: -------------------------------------------------------------------------------- 1 | import flash from "@/mixins/flash"; 2 | import swal from "sweetalert"; 3 | export function useFlash(){ 4 | 5 | function flash(title ,message, level = 'success'){ 6 | return swal(title ,message, level ); 7 | } 8 | 9 | return {flash}; 10 | 11 | } -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/views/HomeView.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/views/AboutView.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/.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-prettier/skip-formatting' 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 'latest' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/views/TextArea.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/.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 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue({ 10 | reactivityTransform: true, 11 | }), 12 | ], 13 | resolve: { 14 | alias: { 15 | '@': fileURLToPath(new URL('./src', import.meta.url)) 16 | } 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/views/FormView.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | 8 | font-weight: normal; 9 | } 10 | 11 | a, 12 | .green { 13 | text-decoration: none; 14 | color: hsla(160, 100%, 37%, 1); 15 | transition: 0.4s; 16 | } 17 | 18 | @media (hover: hover) { 19 | a:hover { 20 | background-color: hsla(160, 100%, 37%, 0.2); 21 | } 22 | } 23 | 24 | @media (min-width: 1024px) { 25 | body { 26 | display: flex; 27 | place-items: center; 28 | } 29 | 30 | #app { 31 | display: grid; 32 | grid-template-columns: 1fr 1fr; 33 | padding: 0 2rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/composables/useStorage.js: -------------------------------------------------------------------------------- 1 | import {ref, watch} from "vue"; 2 | 3 | export function useStorage(key,val = null) { 4 | 5 | 6 | let storedVal = read() 7 | 8 | if (storedVal) { 9 | val = ref(storedVal); 10 | } else { 11 | val = ref(val) 12 | write() 13 | } 14 | 15 | 16 | watch(val, write, {deep : true}); 17 | 18 | function read(){ 19 | return JSON.parse(localStorage.getItem(key)); 20 | } 21 | 22 | function write() { 23 | if (val.value === null || val.value === '') { 24 | localStorage.removeItem(key) 25 | } else { 26 | localStorage.setItem(key, JSON.stringify(val.value)); 27 | } 28 | } 29 | 30 | 31 | return val; 32 | } -------------------------------------------------------------------------------- /Vue-Learn-Part-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-learn-part-2", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", 10 | "format": "prettier --write src/" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.3.4", 14 | "vue-router": "^4.2.4" 15 | }, 16 | "devDependencies": { 17 | "@rushstack/eslint-patch": "^1.3.3", 18 | "@vitejs/plugin-vue": "^4.3.4", 19 | "@vue/eslint-config-prettier": "^8.0.0", 20 | "eslint": "^8.49.0", 21 | "eslint-plugin-vue": "^9.17.0", 22 | "prettier": "^3.0.3", 23 | "sweetalert": "^2.1.2", 24 | "vite": "^4.4.9" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import HomeView from '../views/HomeView.vue' 3 | import FormView from "@/views/FormView.vue"; 4 | 5 | const router = createRouter({ 6 | history: createWebHistory(import.meta.env.BASE_URL), 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'home', 11 | component: HomeView 12 | }, 13 | { 14 | path: '/about', 15 | name: 'about', 16 | component: () => import('../views/AboutView.vue') 17 | }, 18 | { 19 | path: '/form', 20 | name: 'form', 21 | component: () => import('../views/FormView.vue') 22 | }, 23 | { 24 | path: '/textarea', 25 | name: 'textarea', 26 | component: () => import('../views/TextArea.vue') 27 | }, 28 | ] 29 | }) 30 | 31 | export default router 32 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/README.md: -------------------------------------------------------------------------------- 1 | # Vue-Learn-Part-2 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [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). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | npm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | npm run dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | 31 | ### Lint with [ESLint](https://eslint.org/) 32 | 33 | ```sh 34 | npm run lint 35 | ``` 36 | -------------------------------------------------------------------------------- /Vue-Learn-Part-2/src/components/TabbabaleTextarea.vue: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 | 27 |