diff --git a/examples/vue/package.json b/examples/vue/package.json
index 376335ad4b6..cda0b463225 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "@aws-amplify/ui-vue": "^4.3.3",
-    "vue": "^3.0.5",
+    "vue": "^3.5.14",
     "vue-router": "4"
   },
   "devDependencies": {
     "@types/node": "18.8.0",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "^3.5.14",
     "rimraf": "^3.0.2",
     "vite-plugin-pages": "^0.25.0"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
index 82ac74e8e26..45611abc258 100644
--- a/examples/vue/src/main.ts
+++ b/examples/vue/src/main.ts
@@ -1,5 +1,11 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import AmplifyUIVue from '@aws-amplify/ui-vue';
+import '@aws-amplify/ui-vue/styles.css';
 
-createApp(App).use(router).mount('#app');
+// Create app and register plugins
+const app = createApp(App);
+app.use(router);
+app.use(AmplifyUIVue);
+app.mount('#app');
diff --git a/examples/vue/src/pages/ui/components/authenticator/sign-up-with-attributes/index.vue b/examples/vue/src/pages/ui/components/authenticator/sign-up-with-attributes/index.vue
index b8d22bd4267..23d5cc1eac9 100644
--- a/examples/vue/src/pages/ui/components/authenticator/sign-up-with-attributes/index.vue
+++ b/examples/vue/src/pages/ui/components/authenticator/sign-up-with-attributes/index.vue
@@ -21,6 +21,8 @@ Amplify.configure(aws_exports);
         placeholder="Zone Info"
         name="zoneinfo"
         :hideLabel="false"
+        :required="false"
+        :disabled="false"
       />
     </template>
     <template v-slot="{ user, signOut }">
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a6c9ea4101b..7d5fefc9abc 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -3,11 +3,11 @@
   "version": "4.3.3",
   "type": "module",
   "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/style.css"
@@ -28,8 +28,11 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "yarn build:CSS && yarn build:rollup",
+    "postbuild": "rimraf global-spec.d.ts jest.config.d.ts jest.setup.d.ts",
+    "build:CSS": "yarn node -r esbuild-register scripts/copyCSS.js",
+    "build:rollup": "rollup --config",
+    "dev": "yarn build:rollup --watch",
     "clean": "rimraf dist node_modules",
     "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-vue\"'",
     "lint": "yarn typecheck && eslint . --ext .vue,.js,.jsx,.ts,.tsx",
@@ -48,21 +51,25 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-dynamic-import-vars": "^1.4.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rushstack/eslint-patch": "^1.5.1",
     "@testing-library/vue": "^6.6.0",
     "@types/node": "18.8.0",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
     "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
     "eslint-plugin-vue": "^9.17.0",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
     "unplugin-vue-components": "^0.25.0",
-    "vite-jest": "^0.1.4"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@aws-amplify/core": "*",
diff --git a/packages/vue/rollup.config.mjs b/packages/vue/rollup.config.mjs
new file mode 100644
index 00000000000..b03a6499f38
--- /dev/null
+++ b/packages/vue/rollup.config.mjs
@@ -0,0 +1,99 @@
+import { defineConfig } from 'rollup';
+import typescript from 'rollup-plugin-typescript2';
+import externals from 'rollup-plugin-node-externals';
+import vue from 'rollup-plugin-vue';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import fs from 'fs-extra';
+
+// common config settings
+const input = ['src/index.ts'];
+const sourceMap = false;
+const esmOutputDir = 'dist/esm';
+
+// Common output options
+const cjsOutput = {
+  dir: 'dist',
+  entryFileNames: '[name].cjs',
+  format: 'cjs',
+  esModule: true,
+  generatedCode: { reservedNamesAsProps: false },
+  interop: 'auto',
+  exports: 'named'
+};
+
+// Common plugins
+const commonPlugins = [
+  externals({ include: [/node_modules/, /^@aws-amplify/] }),
+  nodeResolve({ extensions: ['.js', '.ts', '.vue', '.css'] }),
+  commonjs({ include: /node_modules/ }),
+  postcss({ extract: false, inject: false }),
+  vue({
+    preprocessStyles: true,
+    template: {
+      isProduction: true,
+      compilerOptions: {
+        whitespace: 'condense',
+        isCustomElement: tag => /^amplify-/.test(tag)
+      }
+    }
+  })
+];
+
+// Ensure styles are copied
+const ensureStyles = () => ({
+  name: 'ensure-styles',
+  writeBundle() {
+    fs.ensureDirSync('dist/components/primitives');
+    fs.copyFileSync(
+      'src/components/primitives/styles.css',
+      'dist/components/primitives/styles.css'
+    );
+  }
+});
+
+const config = defineConfig([
+  // CJS config
+  {
+    input,
+    output: cjsOutput,
+    plugins: [
+      ...commonPlugins,
+      typescript({
+        check: false,
+        useTsconfigDeclarationDir: true,
+        tsconfigOverride: {
+          compilerOptions: { sourceMap, declaration: true, declarationDir: 'dist', rootDir: 'src' },
+          include: ['src/**/*'],
+          exclude: ['node_modules', '**/__tests__/**', '**/*.test.*', 'scripts/**']
+        }
+      }),
+      ensureStyles()
+    ],
+  },
+  // ESM config
+  {
+    input,
+    output: {
+      dir: esmOutputDir,
+      format: 'es',
+      entryFileNames: '[name].mjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src'
+    },
+    plugins: [
+      ...commonPlugins,
+      typescript({
+        check: false,
+        tsconfigOverride: {
+          compilerOptions: { sourceMap, declaration: false, rootDir: 'src', outDir: esmOutputDir },
+          include: ['src/**/*'],
+          exclude: ['node_modules', '**/__tests__/**', '**/*.test.*']
+        }
+      })
+    ],
+  },
+]);
+
+export default config;
diff --git a/packages/vue/scripts/copyCSS.js b/packages/vue/scripts/copyCSS.js
new file mode 100644
index 00000000000..50bb159b9c1
--- /dev/null
+++ b/packages/vue/scripts/copyCSS.js
@@ -0,0 +1,9 @@
+import fs from 'fs-extra';
+
+// Ensure the directory exists
+fs.ensureDirSync('dist');
+
+// Copy CSS files from the UI package
+fs.copySync('../ui/dist/styles.css', 'dist/style.css', { overwrite: true });
+
+console.log('CSS files copied successfully');
diff --git a/packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap b/packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap
index 2a663a6d8f2..aeb0306d1c2 100644
--- a/packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap
+++ b/packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap
@@ -1302,6 +1302,7 @@ exports[`authenticator renders verifyUser subcomponent 1`] = `
                     
                     <input
                       aria-invalid="false"
+                      checked=""
                       class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                       data-amplify-input=""
                       data-amplify-verify-input=""
diff --git a/packages/vue/src/components/__tests__/__snapshots__/select-mfa-type.spec.ts.snap b/packages/vue/src/components/__tests__/__snapshots__/select-mfa-type.spec.ts.snap
index 1aaa2d59d04..b690d11ece1 100644
--- a/packages/vue/src/components/__tests__/__snapshots__/select-mfa-type.spec.ts.snap
+++ b/packages/vue/src/components/__tests__/__snapshots__/select-mfa-type.spec.ts.snap
@@ -62,6 +62,7 @@ exports[`SelectMfaType renders as expected  1`] = `
               
               <input
                 aria-invalid="false"
+                checked=""
                 class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                 data-amplify-input=""
                 data-amplify-selectmfatype-input=""
diff --git a/packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap b/packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap
index 80c9581c47b..827c6fdbaa2 100644
--- a/packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap
+++ b/packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap
@@ -63,6 +63,7 @@ exports[`VerifyUser renders as expected 1`] = `
               
               <input
                 aria-invalid="false"
+                checked=""
                 class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                 data-amplify-input=""
                 data-amplify-verify-input=""
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index 48818d16ca0..9291d9d1a69 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -20,4 +20,21 @@ export { default as AmplifyCheckBox } from './primitives/amplify-check-box.vue';
 export { default as AmplifyButton } from './primitives/amplify-button.vue';
 export { default as BaseFormField } from './primitives/base-form-field.vue';
 export { default as BaseFormFields } from './primitives/base-form-fields.vue';
+
+// Export all primitive base components
+export { default as BaseInput } from './primitives/base-input.vue';
+export { default as BaseLabel } from './primitives/base-label.vue';
+export { default as BaseSelect } from './primitives/base-select.vue';
+export { default as BaseWrapper } from './primitives/base-wrapper.vue';
+export { default as BaseAlert } from './primitives/base-alert.vue';
+export { default as BaseBox } from './primitives/base-box.vue';
+export { default as BaseFieldSet } from './primitives/base-field-set.vue';
+export { default as BaseFooter } from './primitives/base-footer.vue';
+export { default as BaseForm } from './primitives/base-form.vue';
+export { default as BaseHeading } from './primitives/base-heading.vue';
+export { default as BaseSpacer } from './primitives/base-spacer.vue';
+export { default as BaseText } from './primitives/base-text.vue';
+export { default as BaseTwoTabs } from './primitives/base-two-tabs.vue';
+export { default as BaseTwoTabItem } from './primitives/base-two-tab-item.vue';
+
 export * from '../types';
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 6d3d460614a..41c23ee8475 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -25,12 +25,29 @@ import {
   VerifyUser,
 } from './components/index';
 
+// Import all base primitive components
+import BaseInput from './components/primitives/base-input.vue';
+import BaseLabel from './components/primitives/base-label.vue';
+import BaseSelect from './components/primitives/base-select.vue';
+import BaseWrapper from './components/primitives/base-wrapper.vue';
+import BaseAlert from './components/primitives/base-alert.vue';
+import BaseBox from './components/primitives/base-box.vue';
+import BaseFieldSet from './components/primitives/base-field-set.vue';
+import BaseFooter from './components/primitives/base-footer.vue';
+import BaseForm from './components/primitives/base-form.vue';
+import BaseHeading from './components/primitives/base-heading.vue';
+import BaseSpacer from './components/primitives/base-spacer.vue';
+import BaseText from './components/primitives/base-text.vue';
+import BaseTwoTabs from './components/primitives/base-two-tabs.vue';
+import BaseTwoTabItem from './components/primitives/base-two-tab-item.vue';
+
 import { useAuthenticator } from './composables/useAuth';
 
 import './styles.css';
 
 export default {
   install: (app: App) => {
+    // Register main components
     app.component('SignIn', SignIn);
     app.component('SignUp', SignUp);
     app.component('FederatedSignIn', FederatedSignIn);
@@ -59,6 +76,22 @@ export default {
       'AuthenticatorForceNewPasswordFormFields',
       AuthenticatorForceNewPasswordFormFields
     );
+
+    // Register all base primitive components
+    app.component('BaseInput', BaseInput);
+    app.component('BaseLabel', BaseLabel);
+    app.component('BaseSelect', BaseSelect);
+    app.component('BaseWrapper', BaseWrapper);
+    app.component('BaseAlert', BaseAlert);
+    app.component('BaseBox', BaseBox);
+    app.component('BaseFieldSet', BaseFieldSet);
+    app.component('BaseFooter', BaseFooter);
+    app.component('BaseForm', BaseForm);
+    app.component('BaseHeading', BaseHeading);
+    app.component('BaseSpacer', BaseSpacer);
+    app.component('BaseText', BaseText);
+    app.component('BaseTwoTabs', BaseTwoTabs);
+    app.component('BaseTwoTabItem', BaseTwoTabItem);
   },
 };
 
diff --git a/packages/vue/tsconfig.dist.json b/packages/vue/tsconfig.dist.json
new file mode 100644
index 00000000000..a01ecb23d77
--- /dev/null
+++ b/packages/vue/tsconfig.dist.json
@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
+}
\ No newline at end of file
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 954c205d19f..cab1fa12f19 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -1,12 +1,16 @@
 {
   "extends": "@aws-amplify/typescript-config/tsconfig.vue.json",
-  "include": [
-    "__mocks__",
-    "__tests__",
-    "*.ts",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ],
-  "exclude": ["node_modules"]
-}
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "types": [
+      "node",
+      "jest",
+      "@testing-library/jest-dom",
+      "vite/client"
+    ]
+  },
+  "include": ["__mocks__", "__tests__", "*.ts", "*.mjs", "scripts", "src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
deleted file mode 100644
index 289bd1cadd9..00000000000
--- a/packages/vue/vite.config.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { defineConfig, PluginOption } from 'vite';
-import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
-import path from 'path';
-import vue from '@vitejs/plugin-vue';
-import typescript2 from 'rollup-plugin-typescript2';
-import Components from 'unplugin-vue-components/vite';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-
-const resolvePath = (str: string) => path.resolve(__dirname, str);
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    Components({
-      dirs: ['src/components/primitives'],
-      exclude: [/node_modules/],
-    }),
-    typescript2({
-      check: false,
-      include: ['src/components/*.vue', 'src/components/primitives/*.vue'],
-      tsconfigOverride: {
-        compilerOptions: {
-          sourceMap: true,
-          declaration: true,
-          declarationMap: true,
-        },
-        exclude: ['*.ts', '**/__mocks__', '**/__tests__'],
-      },
-    }) as PluginOption,
-  ],
-  resolve: {
-    alias: [
-      {
-        find: './runtimeConfig',
-        replacement: './runtimeConfig.browser',
-      },
-    ],
-  },
-  build: {
-    cssCodeSplit: false,
-    lib: {
-      entry: resolvePath('./src/index.ts'),
-      formats: ['es', 'cjs'],
-      name: 'ui-vue',
-      fileName: (format: string) =>
-        format === 'es' ? 'index.js' : `index.${format}`,
-    },
-    rollupOptions: {
-      plugins: [dynamicImportVars],
-      external: [
-        '@aws-amplify/auth',
-        '@aws-amplify/core',
-        '@aws-amplify/core/internals/utils',
-        'aws-amplify',
-        'aws-amplify/auth',
-        'aws-amplify/core',
-        'aws-amplify/utils',
-        'vue',
-      ],
-      output: { globals: { vue: 'Vue' } },
-    },
-  },
-});
diff --git a/yarn.lock b/yarn.lock
index 97afa0d0fb0..f2e9beda953 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28856,4 +28856,4 @@ zwitch@^1.0.0:
 zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
-  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
\ No newline at end of file