initial configuration

TaKeOvEr-DeV · Dec 17, 2023 · db24437 · db24437
1 parent 4d9388a
commit db24437
Show file tree

Hide file tree

Showing 25 changed files with 2,236 additions and 0 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_APP_VERSION=1.0.0
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,36 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "globals": {
+        process: true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential"
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        'vue/multi-word-component-names': 'off',
+    }
+}
diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# Vue2-Vuetify-Vite
+  <a href="https://nodejs.org/en/about/previous-releases"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatibility"></a>
+
+## Description
+
+  - vue 2
+  - vuetify 2
+  - vite 5
+  - vuex
+  - vue router
+
+## Install Dependencies
+```
+npm install | yarn install
+```
+## Run project
+
+```
+npm run dev | yarn dev
+```
+## Plugin 
+ - @vitejs/plugin-vue2
+ ```
+https://www.npmjs.com/package/@vitejs/plugin-vue2
+```
+ - unplugin-vue-components 
+  ```
+https://www.npmjs.com/package/unplugin-vue-components
+```
+## Custom compilation
+- rollupOptions
+	- assetFileNames
+	- chunkFileNames
+ 	- entryFileNames
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vue2 + vuetify + vite</title>
+  <meta name="description" content="This project uses vue2 and vuetify with vite: migrate to vite " />
+  <meta name="author" content="Jose Luis Marin" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "esnext",
+        "module": "esnext",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        },
+    },
+    "include": [
+        "src/**/*.js",
+        "src/**/**/*.js",
+        "src/**/*.d.js",
+        "src/**/*.module.js",
+        "src/**/*.vue",
+        "vue.config.ts"
+    ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "vue2-vuetify-vite",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Basic configuration of vue2 + vuetify + vite",
+  "repository": "https://github.com/TaKeOvEr-DeV/vue2-vuetify-vite.git",
+  "author": "Jose Luis Marin <takeoverdev@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": " vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "^7.3.67",
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "vite": "5.0.0",
+    "vue": "^2.7.0",
+    "vue-router": "^3.5.2",
+    "vue-toastification": "^1.7.14",
+    "vuetify": "^2.7.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "eslint": "^8.55.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "sass": "~1.32.13",
+    "unplugin-vue-components": "^0.26.0"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-app>
+    <the-nav-bar />
+    <v-main>
+      <router-view />
+    </v-main>
+    <v-footer class="mt-5" padless color="transparent">
+      <v-col :class="'text-center'" cols="12">
+        {{ new Date().getFullYear() }} —
+        {{ "v " + version }}
+      </v-col>
+    </v-footer>
+  </v-app>
+</template>
+<script>
+import Alert from "@/components/common/Alert.vue";
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      version: import.meta.env.VITE_APP_VERSION,
+    };
+  },
+  methods: {
+    showToastAlert(config) {
+      let type = config.type;
+      let message = config.message;
+      let title = config.title;
+      let icon = config.icon ?? "mdi mdi-alert-circle";
+
+      const content = {
+        component: Alert,
+        props: {
+          title: title,
+          body: message,
+        },
+      };
+
+      this.$toast[type](content, {
+        position: "bottom-right",
+        timeout: 3000,
+        closeOnClick: true,
+        pauseOnFocusLoss: false,
+        pauseOnHover: true,
+        draggable: true,
+        draggablePercent: 0.6,
+        showCloseButtonOnHover: false,
+        hideProgressBar: true,
+        closeButton: "button",
+        icon: icon,
+        rtl: false,
+      });
+    },
+  },
+  computed: {
+    ...mapState("alert", {
+      appAlert: "appAlert",
+    }),
+  },
+  watch: {
+    appAlert(newAlert) {
+      this.showToastAlert(newAlert);
+    },
+  },
+};
+</script>
diff --git a/src/components/common/Alert.vue b/src/components/common/Alert.vue
@@ -0,0 +1,36 @@
+<template>
+  <v-row dense class="row-alert" no-gutters>
+    <v-col cols="12">
+      <h4 class="title-text">{{ title }}</h4>
+      <p class="body-text">{{ body }}</p>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    body: String,
+  },
+};
+</script>
+
+<style>
+.row-alert {
+  max-width: 30vh;
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+}
+.title-text {
+  color: white;
+  font-weight: bold;
+  font-size: 17px;
+  margin-bottom: 5x;
+}
+.body-text {
+  color: rgb(228, 228, 228);
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/layout/TheNavBar.vue b/src/components/layout/TheNavBar.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-app-bar app elevate-on-scroll>
+    <h1 class="text-h6">Vue 2 + Vuetify + Vite</h1>
+  </v-app-bar>
+</template>
diff --git a/src/components/layout/TheTitle.vue b/src/components/layout/TheTitle.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-sheet
+    :class="[
+      {
+        'py-2': !small,
+        'text-caption py-1': small,
+      },
+      lightenLevel,
+    ]"
+    class="px-2"
+    :color="background"
+    :rounded="rounded"
+  >
+    <span :class="classTitle + colorTextTransform">{{ title }} </span>
+  </v-sheet>
+</template>
+<script>
+export default {
+  props: {
+    title: { type: String, default: "" },
+    classTitle: { type: String, default: "" },
+    background: { type: String, default: "primary " },
+    colorText: { type: String, default: "white" },
+    small: { type: Boolean, default: false },
+    lighten: { type: Number, default: 1 },
+    rounded: { type: [String], default: "" },
+  },
+  computed: {
+    lightenLevel() {
+      return `lighten-${this.lighten}`;
+    },
+    colorTextTransform() {
+      return `${this.colorText}--text`;
+    },
+  },
+};
+</script>
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -0,0 +1,12 @@
+import Vue from "vue";
+import TheNavBar from './TheNavBar.vue';
+import TheTitle from './TheTitle.vue'
+
+
+const componentsList = [
+    Vue.component("TheNavBar", TheNavBar),
+    Vue.component("TheTitle", TheTitle),
+];
+export const layoutComponents = {
+    componentsList
+}