From 9771d2ff51d46252fc4c43a88a6e12682c4a4d5d Mon Sep 17 00:00:00 2001
From: nitzan-treg <nitzan.tregerman@gmail.com>
Date: Fri, 17 Apr 2026 06:21:58 +0300
Subject: [PATCH] scope page styles in vue templates using style scoped

`the page component in the vue example templates was importing page.css globally, which could let styles leak into other stories. switched to using vue's built-in <style scoped> block instead, which properly isolates the styles to the page component. this affects both the vue3-vite framework templates and the vue3 renderer templates (js and ts variants).`

Signed-off-by: nitzan-treg <nitzan.tregerman@gmail.com>
---
 .../vue3-vite/template/cli/js/Page.vue        | 72 ++++++++++++++++++-
 .../vue3-vite/template/cli/ts/Page.vue        | 72 ++++++++++++++++++-
 code/renderers/vue3/template/cli/js/Page.vue  | 72 ++++++++++++++++++-
 code/renderers/vue3/template/cli/ts/Page.vue  | 72 ++++++++++++++++++-
 4 files changed, 284 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/vue3-vite/template/cli/js/Page.vue b/code/frameworks/vue3-vite/template/cli/js/Page.vue
index a3b9a45544d3..3f2bbc3568cf 100644
--- a/code/frameworks/vue3-vite/template/cli/js/Page.vue
+++ b/code/frameworks/vue3-vite/template/cli/js/Page.vue
@@ -55,7 +55,6 @@
 
 <script>
 import MyHeader from './Header.vue';
-import './page.css';
 
 export default {
   name: 'my-page',
@@ -81,3 +80,74 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
+</style>
diff --git a/code/frameworks/vue3-vite/template/cli/ts/Page.vue b/code/frameworks/vue3-vite/template/cli/ts/Page.vue
index 85701a3bdf00..afe5ebcc45ed 100644
--- a/code/frameworks/vue3-vite/template/cli/ts/Page.vue
+++ b/code/frameworks/vue3-vite/template/cli/ts/Page.vue
@@ -57,7 +57,6 @@
 import { ref } from 'vue';
 
 import MyHeader from './Header.vue';
-import './page.css';
 
 const user = ref<{ name: string } | null>(null);
 
@@ -71,3 +70,74 @@ const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
 </script>
+
+<style scoped>
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
+</style>
diff --git a/code/renderers/vue3/template/cli/js/Page.vue b/code/renderers/vue3/template/cli/js/Page.vue
index a3b9a45544d3..3f2bbc3568cf 100644
--- a/code/renderers/vue3/template/cli/js/Page.vue
+++ b/code/renderers/vue3/template/cli/js/Page.vue
@@ -55,7 +55,6 @@
 
 <script>
 import MyHeader from './Header.vue';
-import './page.css';
 
 export default {
   name: 'my-page',
@@ -81,3 +80,74 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
+</style>
diff --git a/code/renderers/vue3/template/cli/ts/Page.vue b/code/renderers/vue3/template/cli/ts/Page.vue
index 85701a3bdf00..afe5ebcc45ed 100644
--- a/code/renderers/vue3/template/cli/ts/Page.vue
+++ b/code/renderers/vue3/template/cli/ts/Page.vue
@@ -57,7 +57,6 @@
 import { ref } from 'vue';
 
 import MyHeader from './Header.vue';
-import './page.css';
 
 const user = ref<{ name: string } | null>(null);
 
@@ -71,3 +70,74 @@ const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
 </script>
+
+<style scoped>
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
+</style>