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;