Sitecore · CobyPear · Dec 17, 2021 · Nov 15, 2021 · Nov 16, 2021 · Nov 16, 2021
diff --git a/packages/create-sitecore-jss/src/initializers/vue/args.ts b/packages/create-sitecore-jss/src/initializers/vue/args.ts
@@ -1,4 +1,5 @@
 import { ClientAppArgs } from './../../common/args/base';
 import { VueAnswer } from './prompts';
+import { StyleguideArgs } from '../../common/args/styleguide';
 
-export interface VueArgs extends ClientAppArgs, Partial<VueAnswer> {}
+export interface VueArgs extends ClientAppArgs, StyleguideArgs, Partial<VueAnswer> {}
diff --git a/packages/create-sitecore-jss/src/templates/vue/.prettierrc b/packages/create-sitecore-jss/src/templates/vue/.prettierrc
@@ -4,5 +4,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "arrowParens": "always",
-  "printWidth": 100
+  "printWidth": 100,
+  "useTabs": "false"
 }
diff --git a/...eate-sitecore-jss/src/templates/vue/data/content/Styleguide/ContentListField/Item1/en.yml b/...eate-sitecore-jss/src/templates/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: <%- helper.getAppPrefix(appPrefix, appName)%>Styleguide-ContentList-Item-Template
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 1 Text Field
diff --git a/...eate-sitecore-jss/src/templates/vue/data/content/Styleguide/ContentListField/Item2/en.yml b/...eate-sitecore-jss/src/templates/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: <%- helper.getAppPrefix(appPrefix, appName)%>Styleguide-ContentList-Item-Template
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 2 Text Field
diff --git a/.../create-sitecore-jss/src/templates/vue/data/content/Styleguide/ItemLinkField/Item1/en.yml b/.../create-sitecore-jss/src/templates/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: <%- helper.getAppPrefix(appPrefix, appName)%>Styleguide-ItemLink-Item-Template
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 1 Text Field
diff --git a/.../create-sitecore-jss/src/templates/vue/data/content/Styleguide/ItemLinkField/Item2/en.yml b/.../create-sitecore-jss/src/templates/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: <%- helper.getAppPrefix(appPrefix, appName)%>Styleguide-ItemLink-Item-Template
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 2 Text Field
diff --git a/packages/create-sitecore-jss/src/templates/vue/data/dictionary/{{language}}.yml b/packages/create-sitecore-jss/src/templates/vue/data/dictionary/{{language}}.yml
@@ -1,7 +1,8 @@
-styleguide-sample: Dette er en ordbogspost på dansk som en demonstration
-Documentation: Dokumentation
-Styleguide: Styleguide
-GraphQL: GraphQL
-page-not-found: Siden blev ikke fundet
-hide-context-data: Skjul kontekstdata
-show-context-data: Vis kontekstdata
+
+styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
+Documentation: '[<%- language %>] Documentation'
+Styleguide: '[<%- language %>] Styleguide'
+GraphQL: '[<%- language %>] GraphQL'
+page-not-found: '[<%- language %>] Page not found'
+hide-context-data: '[<%- language %>] Hide context data'
+show-context-data: '[<%- language %>] Show context data'
diff --git a/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/en.yml b/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/en.yml
@@ -1,7 +1,7 @@
 fields:
   pageTitle: GraphQL | Sitecore JSS
 placeholders:
-  JssVueWeb-jss-main:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
   - componentName: ContentBlock
     fields:
       heading: Using GraphQL with JSS
@@ -10,7 +10,7 @@ placeholders:
         For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
   - componentName: GraphQL-Layout
     placeholders:
-      JssVueWeb-jss-graphql-layout:
+      <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
       - componentName: GraphQL-IntegratedDemo
         fields:
           sample1: Hello integrated GraphQL world!

diff --git a/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/sample-1/en.yml b/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/sample-1/en.yml
@@ -1,7 +1,7 @@
 fields:
   pageTitle: Sample 1 Page Title
 placeholders:
-  JssVueWeb-jss-main:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
   - componentName: ContentBlock
     fields:
       heading: GraphQL Sample 1

diff --git a/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/sample-2/en.yml b/packages/create-sitecore-jss/src/templates/vue/data/routes/graphql/sample-2/en.yml
@@ -1,7 +1,7 @@
 fields:
   pageTitle: Sample 2 Page Title
 placeholders:
-  JssVueWeb-jss-main:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
   - componentName: ContentBlock
     fields:
       heading: GraphQL Sample 2

diff --git a/packages/create-sitecore-jss/src/templates/vue/data/routes/styleguide/{{language}}.yml b/packages/create-sitecore-jss/src/templates/vue/data/routes/styleguide/{{language}}.yml
@@ -7,20 +7,20 @@ placeholders:
       heading: JSS Styleguide
       content: |
         <div class="alert alert-primary">
-          This is a partial Danish translation of the JSS Styleguide to demonstrate translation functionality.
-          Use the <a href="/en/styleguide">English version</a> for full content.
-        </div>
-        <p>Indholdet og layoutet på denne side er defineret i <code>/data/routes/styleguide/da-DK.yml</code></p>
+            This is a partial <%- language %> translation of the JSS Styleguide to demonstrate translation functionality.
+            Use the <a href="/en/styleguide">English version</a> for full content.
+          </div>
+          <p>The content and layout of this page is defined in <code>/data/routes/styleguide/<%- language %>.yml</code></p>
   - componentName: Styleguide-Layout
     placeholders:
       <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout:
       - componentName: Styleguide-Section
         fields:
-          heading: Flersprogede mønstre
+          heading: Multilingual Patterns
         placeholders:
           <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
           - componentName: Styleguide-Multilingual
             fields:
-              heading: Brug af ordbogen
-              sample: Denne tekst kan oversættes til da-DK.yml
+              heading: Translation Patterns
+              sample: This text can be translated in <%- language %>.yml
 
diff --git a/packages/create-sitecore-jss/src/templates/vue/package.json b/packages/create-sitecore-jss/src/templates/vue/package.json
@@ -6,7 +6,7 @@
   "config": {
     "appName": "<%- appName %>",
     "rootPlaceholders": [
-      "<%- appPrefix ? `${helper.getPascalCaseName(appName)}-` : '' %>jss-main"
+      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
     ],
     "sitecoreDistPath": "/dist/<%- appName %>",
     "sitecoreConfigPath": "/App_Config/Include/zzz",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@apollo/client": "~3.3.19",
     "@panter/vue-i18next": "~0.15.1",
-    "@sitecore-jss/sitecore-jss-vue": "^20.0.0-canary.77",
+    "@sitecore-jss/sitecore-jss-vue": "^20.0.0-canary",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/apollo-option": "^4.0.0-alpha.11",
     "@vue/apollo-ssr": "^4.0.0-alpha.11",
@@ -68,8 +68,8 @@
   },
   "devDependencies": {
     "@babel/register": "7.6.2",
-    "@sitecore-jss/sitecore-jss-cli": "^20.0.0-canary.77",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.0-canary.77",
+    "@sitecore-jss/sitecore-jss-cli": "^20.0.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.0-canary",
     "@vue/cli-plugin-babel": "~4.5.13",
     "@vue/cli-plugin-eslint": "~4.5.13",
     "@vue/cli-service": "~4.5.13",

diff --git a/packages/create-sitecore-jss/src/templates/vue/sitecore/definitions/placeholders.sitecore.js b/packages/create-sitecore-jss/src/templates/vue/sitecore/definitions/placeholders.sitecore.js
@@ -9,10 +9,10 @@ import { Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
  */
 export default function addPlaceholdersToManifest(manifest) {
   manifest.addPlaceholder(
-    { name: 'JssVueWeb-jss-main', displayName: 'Main' },
+    { name: '<%- helper.getAppPrefix(appPrefix, appName) %>jss-main', displayName: 'Main' },
     // you can optionally pass a GUID or unique (app-wide) string as an ID
     // this will inform the ID that is set when imported into Sitecore.
     // If the ID is not set, an ID is created based on the placeholder name.
-    { name: 'JssVueWeb-jss-tabs', displayName: 'Tabs', id: 'tabs-placeholder' }
+    { name: '<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs', displayName: 'Tabs', id: 'tabs-placeholder' }
   );
 }
diff --git a/packages/create-sitecore-jss/src/templates/vue/sitecore/definitions/routes.sitecore.js b/packages/create-sitecore-jss/src/templates/vue/sitecore/definitions/routes.sitecore.js
@@ -22,7 +22,7 @@ export default function addRoutesToManifest(manifest) {
   const appTemplateSection = 'Page Metadata';
 
   manifest.setDefaultRouteType({
-    name: 'JssVueWeb-App Route',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>App Route',
     fields: [
       {
         name: 'pageTitle',
@@ -31,7 +31,7 @@ export default function addRoutesToManifest(manifest) {
         type: CommonFieldTypes.SingleLineText,
       },
     ],
-    insertOptions: ['JssVueWeb-App Route'],
+    insertOptions: ['<%- helper.getAppPrefix(appPrefix, appName) %>App Route'],
   });
 
   return mergeFs('./data/routes') // relative to process invocation (i.e. your package.json)

diff --git a/.../templates/vue/sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js b/.../templates/vue/sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
@@ -7,7 +7,7 @@ import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools
  */
 export default function (manifest) {
   manifest.addTemplate({
-    name: 'JssVueWeb-Styleguide-ContentList-Item-Template',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template',
     fields: [{ name: 'textField', type: CommonFieldTypes.SingleLineText }],
   });
 }
diff --git a/...templates/vue/sitecore/definitions/templates/Styleguide-Explanatory-Component.sitecore.js b/...templates/vue/sitecore/definitions/templates/Styleguide-Explanatory-Component.sitecore.js
@@ -10,8 +10,8 @@ import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools
  */
 export default function (manifest) {
   manifest.addTemplate({
-    name: 'JssVueWeb-Styleguide-Explanatory-Component',
-    id: 'JssVueWeb-styleguide-explanatory-component-template',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-Explanatory-Component',
+    id: '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
     fields: [
       { name: 'heading', type: CommonFieldTypes.SingleLineText },
       { name: 'description', type: CommonFieldTypes.RichText },

diff --git a/...src/templates/vue/sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js b/...src/templates/vue/sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
@@ -7,7 +7,7 @@ import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools
  */
 export default function (manifest) {
   manifest.addTemplate({
-    name: 'JssVueWeb-Styleguide-ItemLink-Item-Template',
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template',
     fields: [{ name: 'textField', type: CommonFieldTypes.SingleLineText }],
   });
 }
diff --git a/packages/create-sitecore-jss/src/templates/vue/src/Layout.vue b/packages/create-sitecore-jss/src/templates/vue/src/Layout.vue
@@ -6,7 +6,7 @@
     <visitor-identification />
     <navigation />
     <div class="container">
-      <placeholder name="JssVueWeb-jss-main" :rendering="route" />
+      <placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main" :rendering="route" />
     </div>
   </div>
 </template>

diff --git a/...eate-sitecore-jss/src/templates/vue/src/components/Styleguide/Styleguide-Multilingual.vue b/...eate-sitecore-jss/src/templates/vue/src/components/Styleguide/Styleguide-Multilingual.vue
@@ -16,7 +16,7 @@
     <p>
       <router-link to="/en/styleguide">Show in English</router-link>
       <br />
-      <router-link to="/da-DK/styleguide">Show in Danish</router-link>
+       <router-link to="/<%- language %>/styleguide">Show in <%- language %></router-link>
     </p>
 
     <!-- $i18n is attached to the App instance by the vue-i18n plugin -->