diff --git a/cypress/generated/addon-interactions.spec.ts b/cypress/generated/addon-interactions.spec.ts
index 0ee69b3f5adc..95d0b59c172d 100644
--- a/cypress/generated/addon-interactions.spec.ts
+++ b/cypress/generated/addon-interactions.spec.ts
@@ -50,4 +50,8 @@ describe('addon-interactions', () => {
onlyOn('vue3', () => {
it('should have interactions', test);
});
+
+ onlyOn('vue', () => {
+ it('should have interactions', test);
+ });
});
diff --git a/lib/cli/src/frameworks/vue/Header.stories.js b/lib/cli/src/frameworks/vue/Header.stories.js
index 007b7f7cb5c5..af27f18a9db3 100644
--- a/lib/cli/src/frameworks/vue/Header.stories.js
+++ b/lib/cli/src/frameworks/vue/Header.stories.js
@@ -3,6 +3,10 @@ import MyHeader from './Header';
export default {
title: 'Example/Header',
component: MyHeader,
+ parameters: {
+ // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+ layout: 'fullscreen',
+ },
};
const Template = (args, { argTypes }) => ({
@@ -14,7 +18,9 @@ const Template = (args, { argTypes }) => ({
export const LoggedIn = Template.bind({});
LoggedIn.args = {
- user: {},
+ user: {
+ name: 'Jane Doe',
+ },
};
export const LoggedOut = Template.bind({});
diff --git a/lib/cli/src/frameworks/vue/Header.vue b/lib/cli/src/frameworks/vue/Header.vue
index 3e704f9bf900..3fb50eafb82e 100644
--- a/lib/cli/src/frameworks/vue/Header.vue
+++ b/lib/cli/src/frameworks/vue/Header.vue
@@ -21,6 +21,7 @@
Acme
+ Welcome, {{ user.name }}!
diff --git a/lib/cli/src/frameworks/vue/Page.stories.js b/lib/cli/src/frameworks/vue/Page.stories.js
index 296bf4485cd6..fd168a48d3fa 100644
--- a/lib/cli/src/frameworks/vue/Page.stories.js
+++ b/lib/cli/src/frameworks/vue/Page.stories.js
@@ -1,25 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
+
import MyPage from './Page';
-import * as HeaderStories from './Header.stories';
export default {
title: 'Example/Page',
component: MyPage,
+ parameters: {
+ // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+ layout: 'fullscreen',
+ },
};
-const Template = (args, { argTypes }) => ({
- props: Object.keys(argTypes),
+const Template = () => ({
components: { MyPage },
- template:
- '',
+ template: '',
});
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
- // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
- ...HeaderStories.LoggedIn.args,
-};
-
export const LoggedOut = Template.bind({});
-LoggedOut.args = {
- ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+ await userEvent.click(loginButton);
};
diff --git a/lib/cli/src/frameworks/vue/Page.vue b/lib/cli/src/frameworks/vue/Page.vue
index 987b8b9f318f..5a45445ed909 100644
--- a/lib/cli/src/frameworks/vue/Page.vue
+++ b/lib/cli/src/frameworks/vue/Page.vue
@@ -67,21 +67,21 @@ export default {
components: { MyHeader },
- props: {
- user: {
- type: Object,
- },
+ data() {
+ return {
+ user: null,
+ };
},
methods: {
onLogin() {
- this.$emit('onLogin');
+ this.user = { name: 'Jane Doe' };
},
onLogout() {
- this.$emit('onLogout');
+ this.user = null;
},
onCreateAccount() {
- this.$emit('onCreateAccount');
+ this.user = { name: 'Jane Doe' };
},
},
};
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index ad1abc9a0259..1071db277dc2 100644
--- a/lib/cli/src/generators/baseGenerator.ts
+++ b/lib/cli/src/generators/baseGenerator.ts
@@ -62,7 +62,7 @@ const builderDependencies = (builder: Builder) => {
const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
const hasInteractiveStories = (framework: SupportedFrameworks) =>
- ['react', 'angular', 'preact', 'svelte', 'vue3', 'html'].includes(framework);
+ ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
export async function baseGenerator(
packageManager: JsPackageManager,