diff --git a/.github/workflows/test-nuxt3.yml b/.github/workflows/test-nuxt3.yml
index fbe6485b..29665f89 100644
--- a/.github/workflows/test-nuxt3.yml
+++ b/.github/workflows/test-nuxt3.yml
@@ -61,7 +61,7 @@ jobs:
working-directory: ${{env.dir}}
run: pnpm run ci
- - uses: actions/upload-artifact@v2
+ - uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-screenshots
diff --git a/.github/workflows/test-svelte4.yml b/.github/workflows/test-svelte4.yml
index f1ca053c..50a72eb1 100644
--- a/.github/workflows/test-svelte4.yml
+++ b/.github/workflows/test-svelte4.yml
@@ -61,7 +61,7 @@ jobs:
working-directory: ${{env.dir}}
run: pnpm run ci
- - uses: actions/upload-artifact@v2
+ - uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-screenshots
diff --git a/.github/workflows/test-vue3.yml b/.github/workflows/test-vue3.yml
index f0ade03e..68442521 100644
--- a/.github/workflows/test-vue3.yml
+++ b/.github/workflows/test-vue3.yml
@@ -126,7 +126,7 @@ jobs:
TOTAL_RUNNERS: 5
THIS_RUNNER: ${{ matrix.containers }}
- - uses: actions/upload-artifact@v2
+ - uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-screenshots
diff --git a/.stackblitz/codeflow.json b/.stackblitz/codeflow.json
index 7e7ff5a1..fcc5fab6 100644
--- a/.stackblitz/codeflow.json
+++ b/.stackblitz/codeflow.json
@@ -3,7 +3,6 @@
"overrides": {
"histoire": "./packages/histoire",
"@histoire/plugin-vue": "./packages/historie-plugin-vue",
- "@histoire/plugin-vue2": "./packages/historie-plugin-vue2",
"@histoire/plugin-svelte": "./packages/historie-plugin-svelte",
"@histoire/plugin-nuxt": "./packages/historie-plugin-nuxt",
"@histoire/plugin-percy": "./packages/historie-plugin-percy",
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index c9c8b22e..b3d0b5be 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -41,10 +41,6 @@ module.exports = {
text: 'Vue 3',
link: '/guide/vue3/getting-started',
},
- {
- text: 'Vue 2.7',
- link: '/guide/vue2/getting-started',
- },
{
text: 'Svelte 3',
link: '/guide/svelte3/getting-started',
@@ -212,64 +208,6 @@ module.exports = {
],
},
],
- '/guide/vue2/': [
- {
- text: 'Guide - Vue 2',
- collapsible: true,
- items: [
- {
- text: 'Getting Started',
- link: '/guide/vue2/getting-started',
- },
- {
- text: 'Stories',
- link: '/guide/vue2/stories',
- },
- {
- text: 'State & Controls',
- link: '/guide/vue2/controls',
- },
- {
- text: 'Events',
- link: '/guide/vue2/events',
- },
- {
- text: 'App setup',
- link: '/guide/vue2/app-setup',
- },
- {
- text: 'Wrapper',
- link: '/guide/vue2/wrapper',
- },
- {
- text: 'Documentation',
- link: '/guide/vue2/docs',
- },
- {
- text: 'Hierarchy',
- link: '/guide/vue2/hierarchy',
- },
- ],
- },
- {
- text: 'Learn more',
- collapsible: true,
- items: [
- {
- text: 'About Histoire ⮌',
- link: '/guide/',
- },
- {
- text: 'Configuration ⮌',
- link: '/guide/config',
- },
- {
- text: 'Plugins ⮌',
- link: '/guide/plugins/official',
- },
- ],
- },
- ],
'/guide/svelte3/': [
{
text: 'Guide - Svelte 3',
diff --git a/docs/guide/config.md b/docs/guide/config.md
index 74cc9f95..8b15a0bc 100644
--- a/docs/guide/config.md
+++ b/docs/guide/config.md
@@ -142,11 +142,10 @@ You can also tell Histoire to configure the sandbox application using the corres
| Framework | Setup function |
| --------- | -------------- |
| Vue 3 | `setupVue3` |
-| Vue 2 | `setupVue2` |
### Vue setup
-Inside your setup file, you can export a `setupVue3` (or `setupVue2` for Vue 2) function that will be called by Histoire allowing you to configure the Vue 3 sandbox application. Histoire provides an optional `defineSetupVue3` helper to have better types in your IDE :
+Inside your setup file, you can export a `setupVue3` function that will be called by Histoire allowing you to configure the Vue 3 sandbox application. Histoire provides an optional `defineSetupVue3` helper to have better types in your IDE :
```ts
// src/histoire.setup.ts
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 461ccda8..0ced1650 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -53,7 +53,6 @@ Histoire is an Open-Source project supported by our sponsors - thank you!
| Framework | Version | Support* | Auto-CodeGen* | Auto-Docs* |
| --------- | -------- | ------- | ------------ | ---- |
| [Vue →](./vue3/getting-started.md) | `3.2+` | ✅ | ✅ | 🏗️ |
-| [Vue →](./vue2/getting-started.md) | `2.7+` | ✅ | ✅ | 🏗️ |
| [Svelte →](./svelte3/getting-started.md) | `3+` | ✅ | - | 🏗️ |
| Solid | - | - | - | - |
| Angular | - | - | - | - |
diff --git a/docs/guide/vue2/app-setup.md b/docs/guide/vue2/app-setup.md
deleted file mode 100644
index 558554b8..00000000
--- a/docs/guide/vue2/app-setup.md
+++ /dev/null
@@ -1,134 +0,0 @@
-# App setup
-
-## Global setup
-
-You can define a setup function globally in your setup file defined by the `setupFile` option in the global configuration ([learn more](../config.md#global-js-and-css)).
-
-For Vue 2, it must be called `setupVue2`. Histoire provides an optional `defineSetupVue2` helper to have better types in your IDE:
-
-```ts
-import { defineSetupVue2 } from '@histoire/plugin-vue2'
-import Vue from 'vue'
-import Vuei18n from 'vue-i18n'
-import { store } from './store'
-import { router } from './router'
-
-export const setupVue2 = defineSetupVue2(({ story, variant }) => {
- // Vue plugin
- Vue.use(Vuei18n)
-
- // Global component
- Vue.component('GlobalComponent', MyGlobalComponent)
-
- // App options
- return {
- store, // Vuex Store
- router, // Vue Router
- provide: {
- key: 'meow',
- },
- }
-})
-```
-
-::: tip
-You can also import global CSS files or JS files in this setup file.
-:::
-
-## Local setup
-
-Inside each story, you can define a `setupApp` prop that will be called by Histoire allowing you to configure the sandbox application as well. It will **not** override the global setup function, but will be called after it. It works the same way with the same parameters.
-
-```vue{17}
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-You can put the prop on the `` component too, so that `` will have a default value for it. Redefining the prop on a `` will **override** the function though.
-
-## Examples
-
-### Vue Router
-
-```vue{5-11,18}
-
-
-
-
-
{{ $route }}
-
-
-```
-
-### Vuex
-
-```vue{5-10,17}
-
-
-
-
-
{{ $store.state }}
-
-
-```
diff --git a/docs/guide/vue2/controls.md b/docs/guide/vue2/controls.md
deleted file mode 100644
index 8c9ce47a..00000000
--- a/docs/guide/vue2/controls.md
+++ /dev/null
@@ -1,323 +0,0 @@
-# State & Controls
-
-Controls give you the ability to interact with your components arguments.
-
-## Defining a state
-
-The first step is to define the state that will be shared to your story. Histoire will automatically synchronize the `data` or reactive data returned in your `setup`. Then you can proceed using your state as usual.
-
-Example with Option API:
-
-```vue{10-17}
-
-
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-
-```
-
-Example with Composition API:
-
-```vue{18-22}
-
-
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-
-```
-
-Example with Composition API (Script Setup):
-
-```vue
-
-
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-
-```
-
-It can also be useful to declare some data that isn't going to be reactive, for example some fixture data or configuration:
-
-```vue{10-15}
-
-
-
-
-
-
- {{ state.colorId }}
-
-
-
-
-```
-
-## Controls panel
-
-To create the control panel, Histoire provides a `controls` slot. You are free to render any element or components inside the slot.
-
-```vue{18-21}
-
-
-
-
-
-
- {{ state.content }}
-
-
-
- Content:
- Disabled:
-
-
-
-
-```
-
-You can also share the same default controls for all variants by putting the slot directly under the `` component:
-
-```vue{3-6}
-
-
-
- Content:
- Disabled:
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-```
-
-A variant can then override the slot if needed.
-
-## Builtin controls
-
-To build a control panel a bit more easily, Histoire provides builtin controls with design that fits the rest of the UI.
-
-```vue{19-20}
-
-
-
-
-
-
- {{ state.content }}
-
-
-
-
-
-
-
-
-
-```
-
-Check out all the available controls in their book: [controls.histoire.dev](https://controls.histoire.dev/).
-
-## Init state
-
-As an alternative to the above, you can pass an `initState` prop to the Story or Variant, which should be a function returning a state object. It's useful to have different states for variants in the same story and to be a bit more explicit at the expense of being more verbose.
-
-You can then use the `state` slot props on the `` slots to access the state.
-
-Example:
-
-```vue{24,26,40,60,62,66}
-
-
-
-
-
-
-
State
-
-
{{ state }}
-
-
-
-
-
-
-
-
-
- {{ state.count }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/docs/guide/vue2/docs.md b/docs/guide/vue2/docs.md
deleted file mode 100644
index 2008d824..00000000
--- a/docs/guide/vue2/docs.md
+++ /dev/null
@@ -1,160 +0,0 @@
-# Documentation
-
-## Markdown
-
-### Custom block
-
-Histoire lets you write markdown documentation for your stories using Vue custom blocks. Add a `docs` tag in your story file:
-
-```vue{5-9}
-
-
-
-
-
-# My documentation
-
-Checkout this [cool video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)!
-
-```
-
-### Sibling markdown
-
-To add documentation to a story, you can also create a file with the same name next to it, with the `.md` extension.
-
-For example, if your story is `BaseButton.story.vue`, create a `BaseButton.story.md` file.
-
-Sibling markdown files are higher priority than custom blocks.
-
-### Standalone page
-
-If you create a markdown file ending with `.story.md` that isn't related to a sibling story file, it will automatically create a virtual story that renders the markdown as a page.
-
-You can add a frontmatter to the markdown to customize the virtual story with the following properties:
-
-- `id` ([reference](../../reference/vue3/story.md#id))
-- `title` ([reference](../../reference/vue3/story.md#title))
-- `icon` ([reference](../../reference/vue3/story.md#icon))
-- `iconColor` ([reference](../../reference/vue3/story.md#iconcolor))
-- `group` ([reference](../../reference/vue3/story.md#group))
-
-Example `Introduction.story.md` file:
-
-```md
----
-group: 'top'
-icon: 'carbon:bookmark'
----
-
-# Welcome
-
-This is a demo book using Vue 2.
-
----
-
-Learn more about Histoire [here](https://histoire.dev/).
-```
-
-### Links
-
-You can link to other stories using a relative path to the story file:
-
-```md
-- [Go to Story](./BaseButton.story.vue)
-- [Go to CodeGen > Slots](./CodeGen.story.vue?variantId=slots)
-- [Go to Markdown file](./MarkdownFile.story.md)
-```
-
-## Source code
-
-By default, Histoire will attempt to generate a copyable source code from the story, dynamically from the current state.
-
-Currently automatic source code generation is only supported for:
-
-- Vue 3
-
-To document a copyable source code manually you can use either the `source` prop or the `source` slot.
-
-```vue{31,55-74}
-
-
-
-
-
-
-
Toto
-
-
-
-
-
-
-
Toto
-
-
-
-
-
-
-
-
-
-
-```
-
-:::tip
-You should use a `