From d954d00170764550eae6daea8a7ff4d03bff9a56 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 25 Jun 2026 16:44:43 -0500
Subject: [PATCH 1/2] feat(useFeatures): add persist option to
 createFeaturesPlugin

Setting persist: true saves the set of enabled feature flags to storage and
reconciles them against the registered flags on load, so a user's feature
toggles survive a page reload. Wires the existing createPluginContext
persist/restore hooks; the selected flag ids round-trip through storage keyed
by the plugin namespace.
---
 .changeset/features-persist-option.md         |  7 +++++++
 .../0/src/composables/useFeatures/index.ts    | 20 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 .changeset/features-persist-option.md

diff --git a/.changeset/features-persist-option.md b/.changeset/features-persist-option.md
new file mode 100644
index 000000000..383b94359
--- /dev/null
+++ b/.changeset/features-persist-option.md
@@ -0,0 +1,7 @@
+---
+"@vuetify/v0": minor
+---
+
+feat(useFeatures): add `persist` option to `createFeaturesPlugin`
+
+Setting `persist: true` saves the set of enabled feature flags to storage and reconciles them against the registered flags on load, so a user's feature toggles survive a page reload. Backed by the existing `createPluginContext` persist/restore hooks and keyed by the plugin namespace.
diff --git a/packages/0/src/composables/useFeatures/index.ts b/packages/0/src/composables/useFeatures/index.ts
index bd8bb84fa..38c636712 100644
--- a/packages/0/src/composables/useFeatures/index.ts
+++ b/packages/0/src/composables/useFeatures/index.ts
@@ -101,6 +101,16 @@ export interface FeaturePluginOptions extends FeatureContextOptions {
    * @remarks Adapters provide dynamic flag values from external services.
    */
   adapter?: MaybeArray<FeaturesAdapter>
+  /**
+   * Persist enabled feature flags to storage and restore them on load.
+   *
+   * @remarks Persists the set of selected flag ids, keyed by the plugin
+   * namespace. On load the selection is reconciled against the registered
+   * flags, so a user's toggles survive a page reload.
+   *
+   * @default false
+   */
+  persist?: boolean
 }
 
 /**
@@ -216,6 +226,16 @@ export const [createFeaturesContext, createFeaturesPlugin, useFeatures] =
     options => createFeatures(options),
     {
       fallback: () => createFeaturesFallback(),
+      persist: context => [...context.selectedIds],
+      restore: (context, saved) => {
+        if (!isArray(saved)) return
+
+        const wanted = new Set(saved)
+        for (const ticket of context.values()) {
+          if (wanted.has(ticket.id)) context.select(ticket.id)
+          else context.unselect(ticket.id)
+        }
+      },
       setup: (context, app, { adapter }) => {
         if (!adapter) return
 

From 6c0965e1aeb1b6de9ecc7ba709eef8e4f919dfc1 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 25 Jun 2026 16:44:43 -0500
Subject: [PATCH 2/2] docs: persist devmode via createFeaturesPlugin persist
 option

Drops the hand-rolled devmode persistence (manual localStorage read in
zero.ts and duplicate watch+storage.set in AppBar and AppSettingsSheet) in
favor of createFeaturesPlugin({ persist: true }).
---
 apps/docs/src/components/app/AppBar.vue           | 12 ++----------
 apps/docs/src/components/app/AppSettingsSheet.vue |  7 +------
 apps/docs/src/plugins/zero.ts                     |  3 ++-
 3 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/apps/docs/src/components/app/AppBar.vue b/apps/docs/src/components/app/AppBar.vue
index a647106e9..81ae1d031 100644
--- a/apps/docs/src/components/app/AppBar.vue
+++ b/apps/docs/src/components/app/AppBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { Atom, useBreakpoints, useFeatures, useStorage, useTheme } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useTheme } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
@@ -14,7 +14,7 @@
   import { useAuthStore } from '@vuetify/auth'
 
   // Utilities
-  import { toRef, watch } from 'vue'
+  import { toRef } from 'vue'
   import { useRoute } from 'vue-router'
 
   // Types
@@ -24,23 +24,15 @@
 
   const auth = useAuthStore()
   const navigation = useNavigation()
-  const storage = useStorage()
   const route = useRoute()
 
   const isHomePage = toRef(() => route.path === '/')
 
   const breakpoints = useBreakpoints()
-  const features = useFeatures()
   const search = useSearch()
   const settings = useSettings()
   const theme = useTheme()
 
-  const devmode = features.get('devmode')!
-
-  watch(() => devmode.isSelected.value, isSelected => {
-    storage.set('devmode', isSelected)
-  })
-
   const darkLogo = 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-dark.svg'
   const lightLogo = 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.svg'
 </script>
diff --git a/apps/docs/src/components/app/AppSettingsSheet.vue b/apps/docs/src/components/app/AppSettingsSheet.vue
index 322eaa079..74bdf192f 100644
--- a/apps/docs/src/components/app/AppSettingsSheet.vue
+++ b/apps/docs/src/components/app/AppSettingsSheet.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { Avatar, useFeatures, useRtl, useStack, useStorage } from '@vuetify/v0'
+  import { Avatar, useFeatures, useRtl, useStack } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
@@ -19,7 +19,6 @@
   const auth = useAuthStore()
   const features = useFeatures()
   const rtl = useRtl()
-  const storage = useStorage()
   const settings = useSettings()
   const levelFilter = useLevelFilterContext()
   const stack = useStack()
@@ -61,10 +60,6 @@
     el.focus()
   })
 
-  watch(() => devmode.isSelected.value, isSelected => {
-    storage.set('devmode', isSelected)
-  })
-
   function onKeydown (e: KeyboardEvent) {
     if (e.key === 'Escape') {
       settings.close()
diff --git a/apps/docs/src/plugins/zero.ts b/apps/docs/src/plugins/zero.ts
index bfffa9998..264951a74 100644
--- a/apps/docs/src/plugins/zero.ts
+++ b/apps/docs/src/plugins/zero.ts
@@ -27,9 +27,10 @@ export default function zero (app: App) {
 
   app.use(
     createFeaturesPlugin({
+      persist: true,
       features: {
         devmode: {
-          $value: IN_BROWSER ? localStorage.getItem('v0:devmode') === 'true' : false,
+          $value: false,
           $description: 'Enables development mode with additional logging and warnings',
         },
       },