diff --git a/tests/components/ct-vue-vite/playwright.config.ts b/tests/components/ct-vue-vite/playwright.config.ts
index 84d5f1a57b..a60d9697c5 100644
--- a/tests/components/ct-vue-vite/playwright.config.ts
+++ b/tests/components/ct-vue-vite/playwright.config.ts
@@ -15,14 +15,22 @@
  */
 
 import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
+import { resolve } from 'path';
 
 const config: PlaywrightTestConfig = {
-  testDir: 'src',
+  testDir: 'tests',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
-    trace: 'on-first-retry'
+    trace: 'on-first-retry',
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
   },
   projects: [
     {
diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
deleted file mode 100644
index 1b38f83212..0000000000
--- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-vue'
-import App from './App.vue';
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import MultiRoot from './components/MultiRoot.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { HooksConfig } from '../playwright'
-
-test.use({ viewport: { width: 500, height: 500 } })
-
-test('render props', async ({ mount }) => {
-  const component = await mount(<Button title="Submit" />)
-  await expect(component).toContainText('Submit')
-})
-
-test('render attributes', async ({ mount }) => {
-  const component = await mount(<Button class="primary" title="Submit" />)
-  await expect(component).toHaveClass('primary');
-});
-
-test('update props without remounting', async ({ mount }) => {
-  const component = await mount(<Counter count={9001} />)
-  await expect(component.locator('#props')).toContainText('9001')
-
-  await component.update(<Counter count={1337} />)
-  await expect(component).not.toContainText('9001')
-  await expect(component.locator('#props')).toContainText('1337')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update event listeners without remounting', async ({ mount }) => {
-  const component = await mount(<Counter />)
-
-  const messages: string[] = []
-  await component.update(<Counter v-on:submit={(count: string) => { 
-    messages.push(count) 
-  }} />)
-  await component.click();
-  expect(messages).toEqual(['hello'])
-  
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update slots without remounting', async ({ mount }) => {
-  const component = await mount(<Counter>Default Slot</Counter>)
-  await expect(component).toContainText('Default Slot')
-
-  await component.update(<Counter>
-    <template v-slot:main>Test Slot</template>
-  </Counter>)
-  await expect(component).not.toContainText('Default Slot')
-  await expect(component).toContainText('Test Slot')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages: string[] = []
-  const component = await mount(<Button 
-    title="Submit"
-    v-on:submit={(data: string) => {
-      messages.push(data)
-    }} 
-  />)
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
-
-test('render a default slot', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    <strong>Main Content</strong>
-  </DefaultSlot>)
-  await expect(component.getByRole('strong')).toContainText('Main Content')
-})
-
-test('render a component as slot', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    <Button title="Submit" />
-  </DefaultSlot>)
-  await expect(component).toContainText('Submit')
-});
-
-test('render a component with multiple slots', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    <div data-testid="one">One</div>
-    <div data-testid="two">Two</div>
-  </DefaultSlot>)
-  await expect(component.getByTestId('one')).toContainText('One')
-  await expect(component.getByTestId('two')).toContainText('Two')
-})
-
-test('render a component with a named slot', async ({ mount }) => {
-  const component = await mount(<NamedSlots>
-    <template v-slot:header>
-      Header
-    </template>
-    <template v-slot:main>
-      Main Content
-    </template>
-    <template v-slot:footer>
-      Footer
-    </template>
-  </NamedSlots>);
-  await expect(component).toContainText('Header')
-  await expect(component).toContainText('Main Content')
-  await expect(component).toContainText('Footer')
-})
-
-test('emit a event when a slot is clicked', async ({ mount }) => {
-  let clickFired = false;
-  const component = await mount(<DefaultSlot>
-    <span v-on:click={() => clickFired = true}>Main Content</span>
-  </DefaultSlot>);
-  await component.locator('text=Main Content').click();
-  expect(clickFired).toBeTruthy();
-})
-
-test('run hooks', async ({ page, mount }) => {
-  const messages: string[] = []
-  page.on('console', m => messages.push(m.text()))
-  await mount<HooksConfig>(<Button title="Submit" />, {
-    hooksConfig: { route: 'A' }
-  })
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
-})
-
-test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(<MultiRoot />)
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-  await component.unmount()
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
-})
-
-test('get textContent of the empty template', async ({ mount }) => {
-  const component = await mount(<EmptyTemplate />);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});
diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js
deleted file mode 100644
index a3c8e52d2f..0000000000
--- a/tests/components/ct-vue-vite/src/notation-vue.spec.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-vue'
-import App from './App.vue';
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import MultiRoot from './components/MultiRoot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import Component from './components/Component.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-
-test.use({ viewport: { width: 500, height: 500 } })
-
-test('render props', async ({ mount }) => {
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    }
-  })
-  await expect(component).toContainText('Submit')
-})
-
-
-test('update props without remounting', async ({ mount }) => {
-  const component = await mount(Counter, {
-    props: { count: 9001 }
-  })
-  await expect(component.locator('#props')).toContainText('9001')
-
-  await component.update({
-    props: { count: 1337 }
-  })
-  await expect(component).not.toContainText('9001')
-  await expect(component.locator('#props')).toContainText('1337')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update event listeners without remounting', async ({ mount }) => {
-  const component = await mount(Counter)
-
-  const messages = []
-  await component.update({
-    on: { 
-      submit: (count) => messages.push(count)
-    }
-  })
-  await component.click();
-  expect(messages).toEqual(['hello'])
-  
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update slots without remounting', async ({ mount }) => {
-  const component = await mount(Counter, {
-    slots: { default: 'Default Slot' }
-  })
-  await expect(component).toContainText('Default Slot')
-
-  await component.update({
-    slots: { main: 'Test Slot' }
-  })
-  await expect(component).not.toContainText('Default Slot')
-  await expect(component).toContainText('Test Slot')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    },
-    on: {
-      submit: (data) => messages.push(data)
-    }
-  })
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
-
-test('render a default slot', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: '<strong>Main Content</strong>'
-    }
-  })
-  await expect(component.getByRole('strong')).toContainText('Main Content')
-})
-
-test('render a component as slot', async ({ mount, page }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: '<Button title="Submit" />',
-    },
-  })  
-  await expect(component).toContainText('Submit')
-})
-
-test('render a component with multiple slots', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: [
-        '<div data-testid="one">One</div>',
-        '<div data-testid="two">Two</div>'
-      ]
-    }
-  })
-  await expect(component.getByTestId('one')).toContainText('One')
-  await expect(component.getByTestId('two')).toContainText('Two')
-})
-
-test('render a component with a named slot', async ({ mount }) => {
-  const component = await mount(NamedSlots, {
-    slots: {
-      header: 'Header',
-      main: 'Main Content',
-      footer: 'Footer'
-    }
-  })
-  await expect(component).toContainText('Header')
-  await expect(component).toContainText('Main Content')
-  await expect(component).toContainText('Footer')
-})
-
-test('render a component without options', async ({ mount }) => {
-  const component = await mount(Component)
-  await expect(component).toContainText('test')
-})
-
-test('run hooks', async ({ page, mount }) => {
-  const messages = []
-  page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
-    props: {
-      title: 'Submit'
-    },
-    hooksConfig: { route: 'A' }
-  })
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
-})
-
-test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(MultiRoot)
-
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-
-  await component.unmount()
-
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
-});
-
-test('get textContent of the empty template', async ({ mount }) => {
-  const component = await mount(EmptyTemplate);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount(App, {
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});
diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts
deleted file mode 100644
index 1070a5bd08..0000000000
--- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-vue'
-import App from './App.vue';
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import MultiRoot from './components/MultiRoot.vue'
-import Component from './components/Component.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { HooksConfig } from '../playwright'
-
-test.use({ viewport: { width: 500, height: 500 } })
-
-test('render props', async ({ mount }) => {
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    }
-  })
-  await expect(component).toContainText('Submit')
-})
-
-test('update props without remounting', async ({ mount }) => {
-  const component = await mount(Counter, {
-    props: { count: 9001 }
-  })
-  await expect(component.locator('#props')).toContainText('9001')
-
-  await component.update({
-    props: { count: 1337 }
-  })
-  await expect(component).not.toContainText('9001')
-  await expect(component.locator('#props')).toContainText('1337')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update event listeners without remounting', async ({ mount }) => {
-  const component = await mount(Counter)
-
-  const messages: string[] = []
-  await component.update({
-    on: { 
-      submit: (data: string) => messages.push(data)
-    }
-  })
-  await component.click();
-  expect(messages).toEqual(['hello'])
-  
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update slots without remounting', async ({ mount }) => {
-  const component = await mount(Counter, {
-    slots: { default: 'Default Slot' }
-  })
-  await expect(component).toContainText('Default Slot')
-
-  await component.update({
-    slots: { main: 'Test Slot' }
-  })
-  await expect(component).not.toContainText('Default Slot')
-  await expect(component).toContainText('Test Slot')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages: string[] = []
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    },
-    on: {
-      submit: (data: string) => messages.push(data)
-    }
-  })
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
-
-test('render a default slot', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: '<strong>Main Content</strong>'
-    }
-  })
-  await expect(component.getByRole('strong')).toContainText('Main Content')
-})
-
-test('render a component as slot', async ({ mount, page }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: '<Button title="Submit" />',
-    },
-  })  
-  await expect(component).toContainText('Submit')
-})
-
-test('render a component with multiple slots', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: [
-        '<div data-testid="one">One</div>',
-        '<div data-testid="two">Two</div>'
-      ]
-    }
-  })
-  await expect(component.getByTestId('one')).toContainText('One')
-  await expect(component.getByTestId('two')).toContainText('Two')
-})
-
-test('render a component with a named slot', async ({ mount }) => {
-  const component = await mount(NamedSlots, {
-    slots: {
-      header: 'Header',
-      main: 'Main Content',
-      footer: 'Footer'
-    }
-  })
-  await expect(component).toContainText('Header')
-  await expect(component).toContainText('Main Content')
-  await expect(component).toContainText('Footer')
-})
-
-test('render a component without options', async ({ mount }) => {
-  const component = await mount(Component)
-  await expect(component).toContainText('test')
-})
-
-test('run hooks', async ({ page, mount }) => {
-  const messages: string[] = []
-  page.on('console', m => messages.push(m.text()))
-  await mount<HooksConfig>(Button, {
-    props: {
-      title: 'Submit'
-    },
-    hooksConfig: { route: 'A' }
-  })
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
-})
-
-test('unmount', async ({ page, mount }) => {
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    }
-  })
-  await expect(page.locator('#root')).toContainText('Submit')
-  await component.unmount();
-  await expect(page.locator('#root')).not.toContainText('Submit');
-});
-
-test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(MultiRoot)
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-  await component.unmount()
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
-})
-
-test('get textContent of the empty template', async ({ mount }) => {
-  const component = await mount(EmptyTemplate);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(App, {
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});
diff --git a/tests/components/ct-vue-vite/tests/events/events.spec.js b/tests/components/ct-vue-vite/tests/events/events.spec.js
new file mode 100644
index 0000000000..4151d6ef0e
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/events/events.spec.js
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+
+test('emit a submit event when the button is clicked', async ({ mount }) => {
+  const messages = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit: (data) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
diff --git a/tests/components/ct-vue-vite/tests/events/events.spec.ts b/tests/components/ct-vue-vite/tests/events/events.spec.ts
new file mode 100644
index 0000000000..b879801c27
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/events/events.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+
+test('emit a submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
diff --git a/tests/components/ct-vue-vite/tests/events/events.spec.tsx b/tests/components/ct-vue-vite/tests/events/events.spec.tsx
new file mode 100644
index 0000000000..97bcc7725e
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/events/events.spec.tsx
@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+
+test('emit a submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(
+    <Button
+      title="Submit"
+      v-on:submit={(data: string) => {
+        messages.push(data);
+      }}
+    />
+  );
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
+
+test('emit a event when a slot is clicked', async ({ mount }) => {
+  let clickFired = false;
+  const component = await mount(
+    <DefaultSlot>
+      <span v-on:click={() => (clickFired = true)}>Main Content</span>
+    </DefaultSlot>
+  );
+  await component.locator('text=Main Content').click();
+  expect(clickFired).toBeTruthy();
+});
diff --git a/tests/components/ct-vue-vite/tests/render/render.spec.js b/tests/components/ct-vue-vite/tests/render/render.spec.js
new file mode 100644
index 0000000000..f0af3a2cdf
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/render/render.spec.js
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import EmptyTemplate from '@/components/EmptyTemplate.vue';
+import Component from '@/components/Component.vue';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('get textContent of the empty template', async ({ mount }) => {
+  const component = await mount(EmptyTemplate);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
+
+test('render a component without options', async ({ mount }) => {
+  const component = await mount(Component);
+  await expect(component).toContainText('test');
+});
diff --git a/tests/components/ct-vue-vite/tests/render/render.spec.ts b/tests/components/ct-vue-vite/tests/render/render.spec.ts
new file mode 100644
index 0000000000..f0af3a2cdf
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/render/render.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import EmptyTemplate from '@/components/EmptyTemplate.vue';
+import Component from '@/components/Component.vue';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('get textContent of the empty template', async ({ mount }) => {
+  const component = await mount(EmptyTemplate);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
+
+test('render a component without options', async ({ mount }) => {
+  const component = await mount(Component);
+  await expect(component).toContainText('test');
+});
diff --git a/tests/components/ct-vue-vite/tests/render/render.spec.tsx b/tests/components/ct-vue-vite/tests/render/render.spec.tsx
new file mode 100644
index 0000000000..918f0e0113
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/render/render.spec.tsx
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import EmptyTemplate from '@/components/EmptyTemplate.vue';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(<Button title='Submit' />);
+  await expect(component).toContainText('Submit');
+});
+
+test('render attributes', async ({ mount }) => {
+  const component = await mount(<Button class='primary' title='Submit' />);
+  await expect(component).toHaveClass('primary');
+});
+
+test('get textContent of the empty template', async ({ mount }) => {
+  const component = await mount(<EmptyTemplate />);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.js b/tests/components/ct-vue-vite/tests/slots/slots.spec.js
new file mode 100644
index 0000000000..2af38036b5
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.js
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+import NamedSlots from '@/components/NamedSlots.vue';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<strong>Main Content</strong>',
+    },
+  });
+  await expect(component.getByRole('strong')).toContainText('Main Content');
+});
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component with multiple slots', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: [
+        '<div data-testid="one">One</div>',
+        '<div data-testid="two">Two</div>',
+      ],
+    },
+  });
+  await expect(component.getByTestId('one')).toContainText('One');
+  await expect(component.getByTestId('two')).toContainText('Two');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(NamedSlots, {
+    slots: {
+      header: 'Header',
+      main: 'Main Content',
+      footer: 'Footer',
+    },
+  });
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.ts b/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
new file mode 100644
index 0000000000..2af38036b5
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+import NamedSlots from '@/components/NamedSlots.vue';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<strong>Main Content</strong>',
+    },
+  });
+  await expect(component.getByRole('strong')).toContainText('Main Content');
+});
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component with multiple slots', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: [
+        '<div data-testid="one">One</div>',
+        '<div data-testid="two">Two</div>',
+      ],
+    },
+  });
+  await expect(component.getByTestId('one')).toContainText('One');
+  await expect(component.getByTestId('two')).toContainText('Two');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(NamedSlots, {
+    slots: {
+      header: 'Header',
+      main: 'Main Content',
+      footer: 'Footer',
+    },
+  });
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
new file mode 100644
index 0000000000..6d9330b5c5
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+import NamedSlots from '@/components/NamedSlots.vue';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(
+    <DefaultSlot>
+      <strong>Main Content</strong>
+    </DefaultSlot>
+  );
+  await expect(component.getByRole('strong')).toContainText('Main Content');
+});
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(
+    <DefaultSlot>
+      <Button title="Submit" />
+    </DefaultSlot>
+  );
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component with multiple slots', async ({ mount }) => {
+  const component = await mount(
+    <DefaultSlot>
+      <div data-testid="one">One</div>
+      <div data-testid="two">Two</div>
+    </DefaultSlot>
+  );
+  await expect(component.getByTestId('one')).toContainText('One');
+  await expect(component.getByTestId('two')).toContainText('Two');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(
+    <NamedSlots>
+      <template v-slot:header>Header</template>
+      <template v-slot:main>Main Content</template>
+      <template v-slot:footer>Footer</template>
+    </NamedSlots>
+  );
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
new file mode 100644
index 0000000000..f4a877a72c
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import MultiRoot from '@/components/MultiRoot.vue';
+
+test('unmount a multi root component', async ({ mount, page }) => {
+  const component = await mount(MultiRoot);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
new file mode 100644
index 0000000000..0077cdfed5
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import MultiRoot from '@/components/MultiRoot.vue';
+
+test('unmount', async ({ page, mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(page.locator('#root')).toContainText('Submit');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ mount, page }) => {
+  const component = await mount(MultiRoot);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
new file mode 100644
index 0000000000..967ac97e0d
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import MultiRoot from '@/components/MultiRoot.vue';
+
+test('unmount a multi root component', async ({ mount, page }) => {
+  const component = await mount(<MultiRoot />);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.js b/tests/components/ct-vue-vite/tests/update/update.spec.js
new file mode 100644
index 0000000000..22a507322c
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.js
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Counter from '@/components/Counter.vue';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    props: { count: 9001 },
+  });
+  await expect(component.locator('#props')).toContainText('9001');
+
+  await component.update({
+    props: { count: 1337 },
+  });
+  await expect(component).not.toContainText('9001');
+  await expect(component.locator('#props')).toContainText('1337');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(Counter);
+
+  const messages = [];
+  await component.update({
+    on: {
+      submit: (count) => messages.push(count),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update slots without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    slots: { default: 'Default Slot' },
+  });
+  await expect(component).toContainText('Default Slot');
+
+  await component.update({
+    slots: { main: 'Test Slot' },
+  });
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.ts b/tests/components/ct-vue-vite/tests/update/update.spec.ts
new file mode 100644
index 0000000000..a97ccd587a
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.ts
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Counter from '@/components/Counter.vue';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    props: { count: 9001 },
+  });
+  await expect(component.locator('#props')).toContainText('9001');
+
+  await component.update({
+    props: { count: 1337 },
+  });
+  await expect(component).not.toContainText('9001');
+  await expect(component.locator('#props')).toContainText('1337');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(Counter);
+
+  const messages: string[] = [];
+  await component.update({
+    on: {
+      submit: (count: string) => messages.push(count),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update slots without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    slots: { default: 'Default Slot' },
+  });
+  await expect(component).toContainText('Default Slot');
+
+  await component.update({
+    slots: { main: 'Test Slot' },
+  });
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.tsx b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
new file mode 100644
index 0000000000..591844b4ec
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Counter from '@/components/Counter.vue';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(<Counter count={9001} />);
+  await expect(component.locator('#props')).toContainText('9001');
+
+  await component.update(<Counter count={1337} />);
+  await expect(component).not.toContainText('9001');
+  await expect(component.locator('#props')).toContainText('1337');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(<Counter />);
+
+  const messages: string[] = [];
+  await component.update(
+    <Counter
+      v-on:submit={(count: string) => {
+        messages.push(count);
+      }}
+    />
+  );
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update slots without remounting', async ({ mount }) => {
+  const component = await mount(<Counter>Default Slot</Counter>);
+  await expect(component).toContainText('Default Slot');
+
+  await component.update(
+    <Counter>
+      <template v-slot:main>Test Slot</template>
+    </Counter>
+  );
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.js b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.js
new file mode 100644
index 0000000000..0caa91f544
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.js
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import App from '@/App.vue';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount(App, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts
new file mode 100644
index 0000000000..000715b368
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import type { HooksConfig } from '../../playwright';
+import App from '@/App.vue';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount<HooksConfig>(App, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx
new file mode 100644
index 0000000000..48d7f6065b
--- /dev/null
+++ b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import type { HooksConfig } from '../../playwright';
+import App from '@/App.vue';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount<HooksConfig>(<App />, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});