add intial changes

6a3a3046 · Sanga Raju Gupta Bonagiri · 6a3a3046 · 6a3a3046 · 6a3a3046 · 6a3a3046
Commit 6a3a3046 authored Dec 27, 2023 by Sanga Raju Gupta Bonagiri
20 changed files
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
\ No newline at end of file
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/README.md
+++ b/README.md
+# vue-vite-mfe
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[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).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/index.html
+++ b/index.html
+<!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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "vue-vite-mfe",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5001 --strictPort",
+    "build": "vite build",
+    "serve": "vite preview --port 5001 --strictPort",
+    "preview": "vite preview --port 5001 --strictPort",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@originjs/vite-plugin-federation": "^1.3.3",
+    "@sangarajuguptanisum/vue-custom-components": "^0.0.3",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "postcss": "^8.4.32",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.10"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script>
+import Footer from './components/Footer/Footer.vue';
+import Header from './components/Header/Header.vue';
+export default {
+  name: "App",
+  components: {
+    Footer,Header
+  }
+}
+
+</script>
+
+<template>
+  <Header></Header>
+  <p>Sample running</p>
+  <Footer></Footer>
+</template>
+
+<style scoped></style>
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
+<template>
+ <footer class="sticky  bottom-0 footer footer-center w-full px-6 py-6 text-white bg-teal-500">
+    <div class="container mx-auto text-center">
+      <p>&copy; 2023 <router-link class=" mt-4 text-xl  text-white hover:text-teal-200 mr-2"
+          to="/">
+          R-Shopping Kart
+        </router-link>All rights reserved.</p>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default{
+    name:"Footer"
+}
+</script>
\ No newline at end of file
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
+<template>
+    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
+        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+            <div class="text-sm lg:flex-grow text-white ">
+                <router-link class=" mt-4 text-3xl  lg:mt-0 text-white hover:text-teal-200 mr-4" to="/">
+                    R-Shopping Cart
+                </router-link>
+                <router-link class="mt-4  lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
+                    About
+                </router-link>
+                <router-link class=" mt-4  lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
+                    Contact
+                </router-link>
+                <router-link
+                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
+                    to="/cart">Kart{{ kartItems > 0 ? kartItems : "" }}</router-link>
+                <span class="mt-4 lg:mt-0 mr-4 relative top-5">
+                    <p class="text-xl text-white capitalize" v-if="user">{{ user }}</p>
+                    <SLogin v-else :loginText="customLoginButton" @user-login="setUserInfo"></SLogin>
+                </span>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+import { SLogin } from '@sangarajuguptanisum/vue-custom-components';
+export default {
+    name: "Header",
+    data() {
+        return {
+            user: ''
+        }
+    },
+    props: {
+        kartItems: {
+            type: Number,
+            default: 0
+        },
+        customLoginButton: {
+            type: String,
+            default: "CLogin"
+        }
+    },
+    methods: {
+        setUserInfo(data) {
+            this.user = data.user.name;
+            console.log(data);
+        }
+    }
+
+}
+</script>
+<style scoped></style>
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import './index.css'
+import '@sangarajuguptanisum/vue-custom-components/dist/index.css';
+import '@sangarajuguptanisum/vue-custom-components/dist/style.css';
+import vueComponents from '@sangarajuguptanisum/vue-custom-components';
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(vueComponents)
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    // {
+    //   path: '/',
+    //   name: 'home',
+    //   component: HomeView
+    // },
+    // {
+    //   path: '/about',
+    //   name: 'about',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/AboutView.vue')
+    // }
+  ]
+})
+
+export default router
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/tailwind.config.js
+++ b/tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+export default {
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/vite.config.js
+++ b/vite.config.js
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import federation from '@originjs/vite-plugin-federation'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    federation({
+      name: 'remote-simple',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './remote-footer': './src/components/Footer/Footer.vue',
+        './remote-header': './src/components/Header/Header.vue',
+      },
+      shared: ['vue','vue-router']
+    })
+  ],
+  build: {
+    target: ["chrome89", "edge89", "firefox89", "safari15"],
+    minify: false,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        minifyInternalExports: false
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})