[Vue] Use the app name as prefix value for templates (#814)

* add prefix name to vue components and templates * updated changelog * re-updated CHANGELOG.md Co-authored-by: Coby Sher <[email protected]>
Sitecore · Sep 15, 2021 · e4f3982 · e4f3982
1 parent 8b8fcd1
commit e4f3982
Show file tree

Hide file tree

Showing 42 changed files with 142 additions and 121 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,7 @@ This project does NOT adhere to [Semantic Versioning](https://semver.org/spec/v2
 ### New Features & Improvements
 
 `[samples/angular]` Language is now preserved when navigating to another page ([#793](https://github.com/Sitecore/jss/pull/793))
-`[samples/nextjs][sitecore-jss-cli]` Prefix added to templates which is replaced on jss create ([#800](https://github.com/Sitecore/jss/pull/800))
+`[samples/nextjs][samples/react][samples/vue][samples/angular][sitecore-jss-cli]` Prefix added to templates which is replaced on jss create ([#800](https://github.com/Sitecore/jss/pull/800), [#811](https://github.com/Sitecore/jss/pull/811), [#813](https://github.com/Sitecore/jss/pull/813), (https://github.com/Sitecore/jss/pull/814))
 
 ## 19.0.0
 

diff --git a/samples/vue/data/content/Styleguide/ContentListField/Item1/en.yml b/samples/vue/data/content/Styleguide/ContentListField/Item1/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-1
 displayName: Styleguide Content List Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssVueWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 1 Text Field
diff --git a/samples/vue/data/content/Styleguide/ContentListField/Item2/en.yml b/samples/vue/data/content/Styleguide/ContentListField/Item2/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-2
 displayName: Styleguide Content List Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssVueWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 2 Text Field
diff --git a/samples/vue/data/content/Styleguide/ItemLinkField/Item1/en.yml b/samples/vue/data/content/Styleguide/ItemLinkField/Item1/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-1
 displayName: Styleguide Item Link Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssVueWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 1 Text Field
diff --git a/samples/vue/data/content/Styleguide/ItemLinkField/Item2/en.yml b/samples/vue/data/content/Styleguide/ItemLinkField/Item2/en.yml
@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-2
 displayName: Styleguide Item Link Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssVueWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 2 Text Field
diff --git a/samples/vue/data/routes/styleguide/custom-route-type/en.yml b/samples/vue/data/routes/styleguide/custom-route-type/en.yml
@@ -1,5 +1,5 @@
 # Using a Custom Route Type enables adding more field data to the route level.
-template: ExampleCustomRouteType
+template: JssVueWeb-ExampleCustomRouteType
 fields:
   # Note that custom route types inherit from the default route type automatically.
   # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.

diff --git a/samples/vue/data/routes/styleguide/en.yml b/samples/vue/data/routes/styleguide/en.yml
@@ -121,7 +121,7 @@ placeholders:
                       # see /data/content/Styleguide/ItemLinkField for definition of this IDs
                       id: styleguide-item-link-field-shared-1
                     localItemLink:
-                      template: Styleguide-ItemLink-Item-Template
+                      template: JssVueWeb-Styleguide-ItemLink-Item-Template
                       fields:
                         textField: Referenced item textField
                 - componentName: Styleguide-FieldUsage-ContentList
@@ -149,10 +149,10 @@ placeholders:
                       # note that names are default auto-generated to be unique. Explicitly specified names must be unique.
                       # NOTE: local item definitions cannot be shared with other content list fields, and are
                       # generally not preferable compared to using shared definitions.
-                      - template: Styleguide-ContentList-Item-Template
+                      - template: JssVueWeb-Styleguide-ContentList-Item-Template
                         fields:
                           textField: Hello World Item 1
-                      - template: Styleguide-ContentList-Item-Template
+                      - template: JssVueWeb-Styleguide-ContentList-Item-Template
                         fields:
                           textField: Hello World Item 2
                 - componentName: Styleguide-FieldUsage-Custom

diff --git a/samples/vue/jss-create.js b/samples/vue/jss-create.js
@@ -18,16 +18,19 @@ const { applyNameToProject } = require('@sitecore-jss/sitecore-jss-cli/dist/cjs/
 module.exports = function createJssProject(argv, nextSteps) {
   console.log(`Executing create script: ${__filename}...`);
 
-  applyNameToProject(__dirname, argv.name, argv.hostName, 'JssVueWeb');
+  applyNameToProject(__dirname, argv.name, argv.hostName, 'JssVueWeb', argv.prefix === 'true');
 
-  if (!argv.fetchWith) {
+  if (!argv.fetchWith || !argv.prefix) {
     nextSteps.push(
       `* Did you know you can customize the Vue sample app using ${chalk.green(
         'jss create'
       )} parameters?`,
       `*  ${chalk.green(
         '--fetchWith {REST|GraphQL}'
-      )} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`
+      )} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`,
+      `*  ${chalk.green(
+        '--prefix {true|false}'
+      )} : Specifies whether the templates should include a prefix. If true, the app's templates will be prefixed with the app's name in PascalCase. This is helpful if deploying multiple apps to the same Sitecore instance. If false, no prefix will be used. Default is false.`
     );
   }
 

diff --git a/samples/vue/sitecore/definitions/components/ContentBlock.sitecore.js b/samples/vue/sitecore/definitions/components/ContentBlock.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'ContentBlock',
+    templateName: 'JssVueWeb-ContentBlock',
     displayName: 'Content Block',
     // totally optional, but fun
     icon: SitecoreIcon.DocumentTag,

diff --git a/samples/vue/sitecore/definitions/components/GraphQL-ConnectedDemo.sitecore.js b/samples/vue/sitecore/definitions/components/GraphQL-ConnectedDemo.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'GraphQL-ConnectedDemo',
+    templateName: 'JssVueWeb-GraphQL-ConnectedDemo',
     icon: SitecoreIcon.GraphConnection_directed,
     fields: [
       { name: 'sample1', type: CommonFieldTypes.SingleLineText },

diff --git a/samples/vue/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.graphql b/samples/vue/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.graphql
@@ -13,7 +13,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
     id
     name
     # Strongly-typed querying on known templates is possible!
-    ...on GraphQLIntegratedDemo {
+    ...on JssVueWebGraphQLIntegratedDemo {
       # Single-line text field
       sample1 {
         # the 'jsonValue' field is a JSON blob that represents the object that
@@ -43,7 +43,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   contextItem: item(path: $contextItem, language: $language) {
     id
     # Get the page title from the app route template
-    ...on AppRoute {
+    ...on JssVueWebAppRoute {
       pageTitle {
         value
       }
@@ -56,7 +56,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on AppRoute {
+        ...on JssVueWebAppRoute {
           pageTitle {
             jsonValue
             value

diff --git a/samples/vue/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.js b/samples/vue/sitecore/definitions/components/GraphQL-IntegratedDemo.sitecore.js
@@ -15,6 +15,7 @@ const query = fs.readFileSync(
 export default function(manifest) {
   manifest.addComponent({
     name: 'GraphQL-IntegratedDemo',
+    templateName: 'JssVueWeb-GraphQL-IntegratedDemo',
     icon: SitecoreIcon.GraphConnection_directed,
     graphQLQuery: query,
     fields: [

diff --git a/samples/vue/sitecore/definitions/components/GraphQL-Layout.sitecore.js b/samples/vue/sitecore/definitions/components/GraphQL-Layout.sitecore.js
@@ -9,6 +9,7 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function(manifest) {
   manifest.addComponent({
     name: 'GraphQL-Layout',
+    templateName: 'JssVueWeb-GraphQL-Layout',
     icon: SitecoreIcon.Layout,
     placeholders: ['jss-graphql-layout'],
   });

diff --git a/samples/vue/sitecore/definitions/components/GraphQL-SSRDemo.sitecore.js b/samples/vue/sitecore/definitions/components/GraphQL-SSRDemo.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'GraphQL-SSRDemo',
+    templateName: 'JssVueWeb-GraphQL-SSRDemo',
     icon: SitecoreIcon.GraphConnection_directed,
     fields: [
       { name: 'sample1', type: CommonFieldTypes.SingleLineText },

diff --git a/samples/vue/sitecore/definitions/components/Styleguide-ComponentParams.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-ComponentParams.sitecore.js
@@ -9,10 +9,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-ComponentParams',
+    templateName: 'JssVueWeb-Styleguide-ComponentParams',
     icon: SitecoreIcon.WindowDialog,
     params: ['cssClass', 'columns', 'useCallToAction'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-CustomRouteType.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-CustomRouteType.sitecore.js
@@ -14,7 +14,7 @@ export default function(manifest) {
   // article sections, where you may wish to use route-level fields for
   // _sorting and filtering_ (it's difficult to query on component-level field data).
   manifest.addRouteType({
-    name: 'ExampleCustomRouteType',
+    name: 'JssVueWeb-ExampleCustomRouteType',
     fields: [
       { name: 'headline', type: CommonFieldTypes.SingleLineText },
       { name: 'author', type: CommonFieldTypes.SingleLineText },
@@ -26,6 +26,7 @@ export default function(manifest) {
   // This component will display the route level fields on the custom route type.
   manifest.addComponent({
     name: 'Styleguide-CustomRouteType',
+    templateName: 'JssVueWeb-Styleguide-CustomRouteType',
     icon: SitecoreIcon.DocumentTag,
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Checkbox.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Checkbox.sitecore.js
@@ -9,13 +9,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Checkbox',
+    templateName: 'JssVueWeb-FieldUsage-Checkbox',
     icon: SitecoreIcon.CheckboxSelected,
     fields: [
       { name: 'checkbox', type: CommonFieldTypes.Checkbox },
       { name: 'checkbox2', type: CommonFieldTypes.Checkbox },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-ContentList.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-ContentList.sitecore.js
@@ -10,6 +10,7 @@ import packageJson from '../../../package.json';
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-ContentList',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-ContentList',
     icon: SitecoreIcon.ListStyle_numbered,
     fields: [
       {
@@ -25,6 +26,6 @@ export default function(manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Custom.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Custom.sitecore.js
@@ -9,13 +9,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Custom',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Custom',
     icon: SitecoreIcon.Gearwheel,
     // NOTE: not using 'CommonFieldTypes' here, because it's a custom field.
     // The 'Integer' field ships with Sitecore; something really custom would need to be
     // implemented as a Sitecore field type as well.
     fields: [{ name: 'customIntField', type: 'Integer' }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Date.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Date.sitecore.js
@@ -9,13 +9,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Date',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Date',
     icon: SitecoreIcon.Clock,
     fields: [
       { name: 'date', type: CommonFieldTypes.Date },
       { name: 'dateTime', type: CommonFieldTypes.DateTime },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-File.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-File.sitecore.js
@@ -9,10 +9,11 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-File',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-File',
     icon: SitecoreIcon.FloppyDisk,
     fields: [{ name: 'file', type: CommonFieldTypes.File }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Image.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Image.sitecore.js
@@ -9,13 +9,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Image',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Image',
     icon: SitecoreIcon.PhotoPortrait,
     fields: [
       { name: 'sample1', type: CommonFieldTypes.Image },
       { name: 'sample2', type: CommonFieldTypes.Image },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-ItemLink.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-ItemLink.sitecore.js
@@ -10,6 +10,7 @@ import packageJson from '../../../package.json';
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-ItemLink',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-ItemLink',
     icon: SitecoreIcon.Link,
     fields: [
       {
@@ -25,6 +26,6 @@ export default function(manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Link.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Link.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Link',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Link',
     icon: SitecoreIcon.Link,
     fields: [
       { name: 'externalLink', type: CommonFieldTypes.GeneralLink },
@@ -18,6 +19,6 @@ export default function(manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Number.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Number.sitecore.js
@@ -9,10 +9,11 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Number',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Number',
     icon: SitecoreIcon.NumbersField,
     fields: [{ name: 'sample', type: CommonFieldTypes.Number }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-RichText.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-RichText.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-RichText',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-RichText',
     icon: SitecoreIcon.TextField,
     fields: [
       { name: 'sample', type: CommonFieldTypes.RichText },
@@ -21,6 +22,6 @@ export default function(manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Text.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-FieldUsage-Text.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-FieldUsage-Text',
+    templateName: 'JssVueWeb-Styleguide-FieldUsage-Text',
     icon: SitecoreIcon.Text,
     fields: [
       { name: 'sample', type: CommonFieldTypes.SingleLineText },
@@ -21,6 +22,6 @@ export default function(manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-Layout-Reuse.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-Layout-Reuse.sitecore.js
@@ -9,10 +9,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-Layout-Reuse',
+    templateName: 'JssVueWeb-Styleguide-Layout-Reuse',
     icon: SitecoreIcon.DocumentsExchange,
     placeholders: ['jss-reuse-example'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }
diff --git a/samples/vue/sitecore/definitions/components/Styleguide-Layout-Tabs-Tab.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-Layout-Tabs-Tab.sitecore.js
@@ -9,6 +9,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-Layout-Tabs-Tab',
+    templateName: 'JssVueWeb-Styleguide-Layout-Tabs-Tab',
     icon: SitecoreIcon.TabPane,
     fields: [
       { name: 'title', type: CommonFieldTypes.SingleLineText },

diff --git a/samples/vue/sitecore/definitions/components/Styleguide-Layout-Tabs.sitecore.js b/samples/vue/sitecore/definitions/components/Styleguide-Layout-Tabs.sitecore.js
@@ -9,10 +9,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function(manifest) {
   manifest.addComponent({
     name: 'Styleguide-Layout-Tabs',
+    templateName: 'JssVueWeb-Styleguide-Layout-Tabs',
     icon: SitecoreIcon.DocumentTag,
     placeholders: ['jss-tabs'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
   });
 }