Submit rsbuild vue 3 vuex tailwindcss postcss example (#4143)

* rsbuild vue 3 vuex example

* update read me

* remove commented files

---------

Co-authored-by: Zack Jackson <[email protected]>

Author: imzisy

README.md

@@ -84,6 +84,7 @@ Module federation will work with any type of file that you're able to import, th
 - Shopify
 - adidas
 - Zomato
+- PayNet (Payments Network Malaysia)
 - and many more I cant remember
 
 # Contribution to this repo

rsbuild-vue3-vuex/README.md

@@ -0,0 +1,43 @@
+# Project Setup and rsbuild vue 3 vuex tailwindcss postcss example:
+
+
+## Setup Instructions
+
+### 1. Clone the Repository
+
+```bash
+git clone <repository-url>
+cd <repository-folder>
+```
+
+### 2. Install Dependencies
+
+You need to install dependencies for both the Provider and consumer folders.
+
+#### In the Provider Folder
+
+```bash
+cd provider
+yarn install
+```
+
+#### In the Consumer Folder
+
+Open a new terminal or navigate back to the root folder and then:
+
+```bash
+cd consumer
+yarn install
+```
+
+### 3. Run the Application
+
+#### In the Consumer Folder
+
+```bash
+yarn dev
+```
+
+## Additional Notes
+
+- Ensure that both the provider and consumer folders have their dependencies installed before running the application.

rsbuild-vue3-vuex/consumer/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

rsbuild-vue3-vuex/consumer/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "osp-dispute-management",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "3.2.31",
+    "vue-router": "^4.0.13",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^0.1.19",
+    "tailwindcss": "^3.0.24",
+    "@rsbuild/core": "^0.7.9",
+    "@rsbuild/plugin-vue": "^0.7.9",
+    "typescript": "^5.4.5"
+  },
+  "license": "MIT"
+}

rsbuild-vue3-vuex/consumer/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

rsbuild-vue3-vuex/consumer/rsbuild.config.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginVue } from "@rsbuild/plugin-vue";
+// import { pluginEslint } from '@rsbuild/plugin-eslint';
+import path from "node:path";
+import { dependencies } from "./package.json";
+import { ModuleFederationPlugin } from "@module-federation/enhanced/rspack";
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: "./src/main.js",
+    },
+  },
+  server: {
+    port: 3000,
+  },
+  output: {
+    assetPrefix: '/',
+    filenameHash: true,
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      // Will work in dev only if set to "/"
+      config.resolve ||= {};
+      config.resolve.alias ||= {};
+      config.output ||= {};
+      // public
+      config.resolve.alias["@"] = path.resolve(__dirname, "src");
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: `ASSET_HOST`,
+          filename: `ASSET_HOST__remoteEntry.js`,
+          remotes: {
+            "@remote": "ASSET_REMOTE@http://localhost:3001/remoteEntry.js",
+          },
+          shared: {
+            vue: {
+              singleton: true,
+              requiredVersion: dependencies.vue,
+            },
+            vuex: {
+              singleton: true,
+              requiredVersion: dependencies.vuex,
+            },
+          },
+        }),
+      ]);
+    },
+  },
+  plugins: [pluginVue({
+    splitChunks: {
+      vue: false,
+      router: false
+    }
+  })],
+});

rsbuild-vue3-vuex/consumer/src/App.vue

@@ -0,0 +1,22 @@
+<script>
+export default {
+  name: "App",
+};
+</script>
+<template>
+  <div :class="$style.view">
+    <div :class="$style.main">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style module scoped>
+.view {
+  @apply min-h-screen overflow-hidden bg-gray-100 print:!overflow-visible print:invisible print:h-full;
+}
+
+.main {
+  @apply m-auto;
+}
+</style>

rsbuild-vue3-vuex/consumer/src/bootstrap.js

@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+const app = createApp(App);
+
+export const bootstrap = () => {
+  app
+    .use(store(app))
+    .use(router)
+    .mount("#root");
+};

rsbuild-vue3-vuex/consumer/src/main.js

@@ -0,0 +1 @@
+import("./bootstrap").then(({ bootstrap }) => bootstrap());

rsbuild-vue3-vuex/consumer/src/router/index.js

@@ -0,0 +1,12 @@
+import { createRouter, createWebHistory } from "vue-router";
+import routes from "./routes";
+
+const router = createRouter({
+  hashbang: false,
+  mode: "history",
+  history: createWebHistory("/"),
+  base: "/",
+  routes,
+});
+
+export default router;

rsbuild-vue3-vuex/consumer/src/router/routes.js

@@ -0,0 +1,10 @@
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("@/views/Index.vue"),
+  },
+];
+
+export default routes;

rsbuild-vue3-vuex/consumer/src/store/index.js

@@ -0,0 +1,14 @@
+import { createStore } from "vuex";
+import { remoteStore } from "@remote/store";
+
+const searchInput = {
+  state: {
+    queryData: null,
+  },
+  mutations: {},
+};
+
+export default (app) =>
+  createStore({
+    ...remoteStore,
+  });

rsbuild-vue3-vuex/consumer/src/views/Index.vue

@@ -0,0 +1,36 @@
+<script>
+import AppIndex from "@remote/AppIndex";
+
+export default {
+  name: "HostIndex",
+  components: {
+    AppIndex,
+  },
+  setup() { },
+  computed: {
+    userData() {
+      return this.$store.state.userData;
+    },
+    initialLoaded() {
+      return this.$store.state.initialLoaded;
+    },
+  },
+  mounted() {
+    this.$store
+      .dispatch("getUserData")
+      .catch((err) => {
+        console.log(err);
+      })
+      .then((message) => {
+        console.log(message)
+      });
+  },
+};
+</script>
+
+<template>
+  <p> Hi There, this is consumer app. I'm loading userData from remote : {{ userData }}</p>
+  <AppIndex>
+    <router-view />
+  </AppIndex>
+</template>

rsbuild-vue3-vuex/consumer/tailwind.config.js

@@ -0,0 +1,67 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  mode: "jit",
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: "class", // or 'media' or 'class'
+  theme: {
+    backgroundImage: {
+      "panel-bg": "url('public/img/icons/panel-bg.png')",
+    },
+    container: {
+      center: true,
+    },
+    fontFamily: {
+      sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      mono: ["'Major\\ Mono\\ Display'", ...defaultTheme.fontFamily.mono],
+    },
+    extend: {
+      fontFamily: {
+        display: ["Raleway", ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        primary: {
+          darkest: "#3b5bdb",
+          dark: "#4263eb",
+          DEFAULT: "#5c7cfa",
+          light: "#91a7ff",
+          lightest: "#dbe4ff",
+        },
+        info: {
+          darkest: "#1971c2",
+          dark: "#1c7ed6",
+          DEFAULT: "#339af0",
+          light: "#74c0fc",
+          lightest: "#d0ebff",
+        },
+        success: {
+          darkest: "#099268",
+          dark: "#0ca678",
+          DEFAULT: "#20c997",
+          light: "#63e6be",
+          lightest: "#c3fae8",
+        },
+        error: {
+          darkest: "#e03131",
+          dark: "#f03e3e",
+          DEFAULT: "#ff6b6b",
+          light: "#ffa8a8",
+          lightest: "#ffe3e3",
+        },
+        warning: {
+          darkest: "#f08c00",
+          dark: "#f59f00",
+          DEFAULT: "#ff922b",
+          light: "#ffe066",
+          lightest: "#fff3bf",
+        },
+      },
+      gridTemplateRows: {
+        7: "repeat(7, minmax(0,1fr))",
+        8: "repeat(8, minmax(0,1fr))",
+        9: "repeat(9, minmax(0,1fr))",
+        10: "repeat(10, minmax(0,1fr))",
+      },
+    },
+  },
+};