Vue 3 workspace setup guide

Step 1: Scaffolding

Based on vue’s recommended way to start a Vite-powered Vue project, run the following command:

npm create vue@3

You’ll be prompted with a few configuration options.

Keep in mind that if you opt for adding the Vue Router you must use it in the Hash Mode.

When the script finishes, you can run the following commands:

cd vue-project
npm install

Step 2: Integrate Component SDK

To integrate the Component SDK in the workspace, run the following command:

npm install -D @ixon-cdk/core @ixon-cdk/runner

Step 3: Generate IFrame wrapper component

Now that the workspace is correctly set up to run IXON Component SDK commands, run the following command to generate a component:

npx cdk generate my-component

Choose the IFrame wrapper template.

Step 4: Configure Vite

In the vite.config.ts file you must add the following lines to set a new base and build.outDir for the vite build:

  export default defineConfig({
+   base: './',
+   build: {
+     outDir: 'components/my-component/dist'
+   },
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  })

Step 5: Build and Simulate

You can now build the vue app and simulate it through the iframe wrapper component, by running these two commands:

npx vite build --watch
npx cdk simulate my-component

Step 6: Component Context

Within the vue app you can access the component context by importing the getComponentContext function which returns a Promise that resolves with the component context instance.

import { onMounted } from "vue";
import { getComponentContext } from "@ixon-cdk/iframe-adapter";

onMounted(async () => {
  const context = await getComponentContext();
});