diff --git a/apps/docs/.vitepress/sidebar.ts b/apps/docs/.vitepress/sidebar.ts index c8775fa985..3df85a5860 100644 --- a/apps/docs/.vitepress/sidebar.ts +++ b/apps/docs/.vitepress/sidebar.ts @@ -99,18 +99,10 @@ export const sidebar = [ link: "/guides/cms/", collapsed: true, items: [ - { - text: "Custom Elements", - link: "/guides/cms/custom-elements.html", - }, { text: "Content Pages", link: "/guides/cms/content-pages.html", }, - { - text: "Customize Components", - link: "/guides/cms/customize-components.html", - }, { text: "Implement Missing Component", link: "/guides/cms/missing-component.html", diff --git a/apps/docs/src/concepts/shopping-experiences.md b/apps/docs/src/concepts/shopping-experiences.md index fd7896ef38..e531316a9b 100644 --- a/apps/docs/src/concepts/shopping-experiences.md +++ b/apps/docs/src/concepts/shopping-experiences.md @@ -21,7 +21,7 @@ This guide will discuss how to use and customize [Shopping Experiences](https:// Shopping Experiences are implemented as a dedicated package that you can install in your project. -If your project is based on the [Demo Store Template](../introduction/templates/demo-store-template), that package is already installed. If you are using a custom template, follow the instructions in [Install the package](#install-the-package) first. +If your project is based on the [Vue Starter Template](../introduction/templates/vue-starter-template.html), that package is already installed. If you are using a custom template, follow the instructions in [Install the package](#install-the-package) first. ## Install the package @@ -64,32 +64,7 @@ If you already have your own UnoCSS or Tailwind setup, you can keep using `@shop ## CMS rendering workflow -Understanding how the API data flows into rendered components helps you know what's automatic and what requires your own implementation. - -### Data → Component mapping - -The Shopware API returns a nested CMS tree: - - - -``` -CmsPage - └── CmsSection (type e.g. "default", "sidebar") - └── CmsBlock (type e.g. "image-text", "product-slider") - └── CmsSlot (type e.g. "image", "text") -``` - - - -Each node has a `type` field. The `cms-base-layer` package resolves a Vue component for every node by converting the type to a PascalCase component name: - -| API node | type value | resolved component | -| ------------- | ------------ | ------------------- | -| `cms_section` | `default` | `CmsSectionDefault` | -| `cms_block` | `image-text` | `CmsBlockImageText` | -| `cms_slot` | `image` | `CmsElementImage` | - -This resolution is done by `resolveCmsComponent` from `@shopware/composables`. +The [Rendering CMS Pages recipe](../frontends-recipes/cms/rendering.html) explains how the CMS tree in the API response — sections, blocks and slots — is resolved to components. ### What is handled automatically @@ -97,38 +72,7 @@ The `@shopware/cms-base-layer` package ships ready-made components for all **def ### What requires your implementation -Any CMS block or element type that is **not** part of the default set — typically custom blocks created in the Shopware backend — will not have a matching component. In development mode you will see an outlined placeholder where the component is missing, with: - -- the expected component name to create (e.g. `CmsElementMyCustomSlider.vue`) -- a link to the relevant docs -- a one-click "copy AI prompt" button pre-filled with the live API data for that element - -In production the placeholder is invisible (renders nothing), so missing components fail silently. - -### Implementing a missing component - -When a CMS element or block has no matching Vue component, the dev-mode placeholder gives you everything you need to get started quickly. - -**Using the placeholder:** - -1. Open your browser on any page that contains the unimplemented CMS type. -2. You will see a highlighted placeholder showing the expected component name (e.g. `CmsElementMyCustomSlider`). -3. Click **docs ↗** to open the relevant implementation guide. -4. Click **copy AI prompt** to copy a ready-to-use prompt to your clipboard. It includes: - - the exact component name and CMS type - - the full `content` prop JSON as returned by the API (including `config` and `data` fields) - - a reference to the docs -5. Paste the prompt into your AI coding assistant to generate a working first draft of the component. - -**Completing the implementation:** - -1. Create a file with the expected component name in your project, e.g. `components/CmsElementMyCustomSlider.vue`. -2. Nuxt auto-imports it as a global component, which is picked up by the resolver — the placeholder will disappear on the next hot-reload. -3. Use `defineProps<{ content: Schemas["CmsSlot"] }>()` and access `content.data` / `content.config` for the element's data. - -::: tip Console warnings -In development mode the browser console also logs a warning for each missing component, including the component name to create and a direct link to the relevant docs page. -::: +A block or element type outside the default set — typically a custom block created in the Shopware backend — has no matching component. In development it renders a placeholder with the component name to create; in production it renders nothing. A missing section type shows a plain "There is no …" line instead, in every mode. [Implement a Missing CMS Component](../guides/cms/missing-component.html) takes you from the placeholder to a working component. ## 3D / spatial media support @@ -136,4 +80,4 @@ Shopping Experiences also support 3D models (GLB format) in image elements, imag ## How to build Pages, Elements and Blocks? - + diff --git a/apps/docs/src/frontends-recipes/cms/contact-form.md b/apps/docs/src/frontends-recipes/cms/contact-form.md index f8d3a3b23a..864f5fadb9 100644 --- a/apps/docs/src/frontends-recipes/cms/contact-form.md +++ b/apps/docs/src/frontends-recipes/cms/contact-form.md @@ -600,7 +600,7 @@ Send both from an element override: `slotId` from `content.id`, which `CmsSlot` - [Create content pages](../../guides/cms/content-pages.html) - [Create elements](../../guides/cms/create-elements.html) - [Overwriting CMS components](../../guides/cms/overwriting-cms.html) -- [Custom CMS elements](../../guides/cms/custom-elements.html) +- [Implement a Missing CMS Component](../../guides/cms/missing-component.html) - [Composables reference](../../packages/composables/) - [CMS base layer package](../../packages/cms-base-layer.html) - [API client package](../../packages/api-client.html) diff --git a/apps/docs/src/getting-started/cms/custom-elements.md b/apps/docs/src/getting-started/cms/custom-elements.md index ef27b2a67f..909a91fcd9 100644 --- a/apps/docs/src/getting-started/cms/custom-elements.md +++ b/apps/docs/src/getting-started/cms/custom-elements.md @@ -4,11 +4,11 @@ nav: head: - - meta - http-equiv: refresh - content: "0; url=/frontends/guides/cms/custom-elements.html" + content: "0; url=/frontends/guides/cms/missing-component.html" --- # This page has moved -This content is now part of **[Custom Elements (CMS)](/frontends/guides/cms/custom-elements.html)**. +This content is now part of **[Implement a Missing CMS Component](/frontends/guides/cms/missing-component.html)**. -If you are not redirected automatically, [click here](/frontends/guides/cms/custom-elements.html). +If you are not redirected automatically, [click here](/frontends/guides/cms/missing-component.html). diff --git a/apps/docs/src/getting-started/cms/customize-components.md b/apps/docs/src/getting-started/cms/customize-components.md index df5d3b47c2..23dd30a635 100644 --- a/apps/docs/src/getting-started/cms/customize-components.md +++ b/apps/docs/src/getting-started/cms/customize-components.md @@ -4,11 +4,11 @@ nav: head: - - meta - http-equiv: refresh - content: "0; url=/frontends/guides/cms/customize-components.html" + content: "0; url=/frontends/guides/cms/overwriting-cms.html" --- # This page has moved -This content is now part of **[Customize Components](/frontends/guides/cms/customize-components.html)**. +This content is now part of **[Overwrite CMS components](/frontends/guides/cms/overwriting-cms.html)**. -If you are not redirected automatically, [click here](/frontends/guides/cms/customize-components.html). +If you are not redirected automatically, [click here](/frontends/guides/cms/overwriting-cms.html). diff --git a/apps/docs/src/guides/cms/content-pages.md b/apps/docs/src/guides/cms/content-pages.md index 236fd32e79..f090139dcb 100644 --- a/apps/docs/src/guides/cms/content-pages.md +++ b/apps/docs/src/guides/cms/content-pages.md @@ -49,7 +49,7 @@ if you followed the previous chapter on [routing](../routing). The `data` value The `cms-base` package has an opinionated style of components and is based on Tailwind.css. If you want to override components or add custom ones, you can build them right into your project or import them as a separate package. - + ## Use custom components diff --git a/apps/docs/src/guides/cms/create-blocks.md b/apps/docs/src/guides/cms/create-blocks.md index 70ec1420c1..497c488e06 100644 --- a/apps/docs/src/guides/cms/create-blocks.md +++ b/apps/docs/src/guides/cms/create-blocks.md @@ -15,14 +15,14 @@ nav: # Create Blocks (CMS) -Make sure, you've created a new file as described in [customize components](customize-components.html#create-new-files). +Create the file under a directory registered with `global: true` — `app/components/cms/` in `vue-starter-template` — as [Overwrite CMS components](overwriting-cms.html#where-the-file-goes) explains. Next, import the correct type for your block and use it to define the `content` property: ```vue - + - - -``` - - - -That works, but it's quite repetiive and hard to read. So we can use another composable `useCmsBlock` which makes our lives way easier. - ```vue{12,14-16,20-22} @@ -110,4 +77,4 @@ const centerContent = computed(() => getSlotContent("center")); -No you can go ahead and override blocks and elements step by step. +Now you can go ahead and override blocks and elements step by step. The [Rendering CMS Pages recipe](../../frontends-recipes/cms/rendering.html) explains how a block's `content` reaches this component, and why the getter and the `computed` matter. diff --git a/apps/docs/src/guides/cms/create-elements.md b/apps/docs/src/guides/cms/create-elements.md index e1910bb26a..9602c2fb33 100644 --- a/apps/docs/src/guides/cms/create-elements.md +++ b/apps/docs/src/guides/cms/create-elements.md @@ -20,7 +20,7 @@ Start with importing the correct element type from the `@shopware/composables` p ```vue - + - - -``` - - - -### Reading config - -Component settings are passed via props. The declared `defaultConfig` can be accessed through the `props.content.config` property. - -The following is an example of how to convert the backend registration config to a TypeScript type. - - - -```ts{4-9} -type CmsElementRegistration = { - name: string; - defaultConfig: { - dailyUrl: { - source: "static"; - value: string; - }; - }; -}; - -declare const Shopware: { - Service(service: "cmsService"): { - registerCmsElement(config: CmsElementRegistration): void; - }; -}; - -Shopware.Service("cmsService").registerCmsElement({ - name: "dailymotion", - defaultConfig: { - dailyUrl: { - source: "static", - value: "", - }, - }, -}); -``` - - - - +# This page has moved -```ts -type CmsElementDailymotionConfig = { - dailyUrl: { - value: string; - source: "static"; - }; -}; -``` +This content is now part of **[Implement a Missing CMS Component](/frontends/guides/cms/missing-component.html)**. - +If you are not redirected automatically, [click here](/frontends/guides/cms/missing-component.html). diff --git a/apps/docs/src/guides/cms/customize-components.md b/apps/docs/src/guides/cms/customize-components.md index 042c1e3c2a..23dd30a635 100644 --- a/apps/docs/src/guides/cms/customize-components.md +++ b/apps/docs/src/guides/cms/customize-components.md @@ -1,53 +1,14 @@ --- +nav: + hidden: true head: - - meta - - name: og:title - content: Customize Components (CMS) - - - meta - - name: og:description - content: "In this chapter you will learn how to customize a component (CMS)." - - - meta - - name: og:image - content: "https://frontends-og-image.vercel.app/Customize%20Components.png?fontSize=120px" -nav: - position: 30 + - http-equiv: refresh + content: "0; url=/frontends/guides/cms/overwriting-cms.html" --- -# Customize Components - -:::info Only for `cms-base` package -The directory structure is only relevant, if you want to customize the components of the `cms-base` package. If you are using a custom template, you can place components where you want, because you handle their resolution by yourself. In that case skip to [Create Elements](./create-elements). -::: - -### Create new files - -In order to customize a component, you need to override it. The process is the same regardless what type of component you want to override - -- Sections -- Blocks -- Elements - -To do so, you need to create a file with the same name as the component in the `components` directory or wherever according to the project's configuration. - - - -```json -demo-store/ -├─ components/ -| ├─ cms/ -| ├─ ├─ CmsBlockImageHighlightRow.vue -``` - - - -Now the CMS module will automatically resolve that file based on the name and you can start writing your component. - -## Internal components - -❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.** - -There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwProductCard.vue). +# This page has moved -### Additional Example +This content is now part of **[Overwrite CMS components](/frontends/guides/cms/overwriting-cms.html)**. - +If you are not redirected automatically, [click here](/frontends/guides/cms/overwriting-cms.html). diff --git a/apps/docs/src/guides/cms/index.md b/apps/docs/src/guides/cms/index.md index 518c859df5..ac30351c6f 100644 --- a/apps/docs/src/guides/cms/index.md +++ b/apps/docs/src/guides/cms/index.md @@ -8,9 +8,12 @@ nav: Everything related to CMS ([Shopping Experiences](../../concepts/shopping-experiences.html)). - - + + +Rendering a CMS page and the contact form element are covered end-to-end in the Frontends Recipes: + + diff --git a/apps/docs/src/guides/cms/missing-component.md b/apps/docs/src/guides/cms/missing-component.md index 7cb7b6a381..735a7d4c7e 100644 --- a/apps/docs/src/guides/cms/missing-component.md +++ b/apps/docs/src/guides/cms/missing-component.md @@ -73,7 +73,9 @@ The Shopware API returns a CMS tree of sections, blocks, and slots. Each node ha | `cms_block` | `image-text` | `CmsBlockImageText.vue` | | `cms_slot` | `my-custom-slider` | `CmsElementMyCustomSlider.vue` | -If no matching component exists, the placeholder appears. Your job is to create that component. +For a custom element, `type` is the `name` it was registered with in the Administration, so `registerCmsElement({ name: "dailymotion" })` expects `CmsElementDailymotion.vue`. + +If no matching block or element component exists, the placeholder appears in development, and the browser console logs a warning with the component name to create and a link to the docs. In production nothing renders, so a missing component fails silently. A missing section is the exception: `CmsPage` renders a plain "There is no …" line for it in every mode. Your job is to create the component. ## Is this a default Shopware CMS component? @@ -87,13 +89,13 @@ If the component type is part of **core Shopware 6 CMS** and is not covered by ` Add the **`cms-base`** label to the issue. Include the component name shown in the placeholder, the `type` value, and the `apiAlias` from the API response. You can copy the full content JSON from the **copy AI prompt** button in the placeholder. ::: -If the component belongs to a custom plugin or you created the block yourself in the Shopware backend, continue with the steps below. +If the component belongs to a custom plugin or you created the block yourself in the Shopware backend, continue with the steps below. The backend side of a custom element is described in [Add custom CMS element](https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-element.html). ## Step 1 — Create the file

Your component

-

Create components/{{ componentName }}.vue

+

Create app/components/cms/{{ componentName }}.vue

Create the file under your template’s global CMS components dir (e.g. `app/components/cms/`), which templates register with `global: true` so `resolveComponent` can find it: @@ -102,8 +104,10 @@ Create the file under your template’s global CMS components dir (e.g. `app/com ``` your-project/ -└── components/ - └── {{ componentName }}.vue ← create this +└── app/ + └── components/ + └── cms/ + └── {{ componentName }}.vue ← create this ``` @@ -115,7 +119,7 @@ Every CMS component receives a single `content` prop. Use the Shopware schema ty ```vue - + ``` +Read the settings through `getConfigValue` rather than from `content.config` directly. It returns `false` for an entry whose `source` is `mapped`, because a mapped value comes from the surrounding entity, not from the element. + ## Step 4 — Verify @@ -205,14 +252,30 @@ const title = config?.title?.value; Save the file. Vite will hot-reload and the placeholder will be replaced by your component. If it still shows, check that: - the filename exactly matches the expected component name (PascalCase, `.vue` extension) -- the file is inside a directory that Nuxt scans for components +- the file is inside a directory your `nuxt.config.ts` registers with `global: true` — `app/components/cms/` in `vue-starter-template`. A file in plain `app/components/` is auto-imported but not global, so `resolveComponent` does not find it. ::: tip No restart needed Nuxt's component auto-import picks up new files without restarting the dev server. ::: +Outside Nuxt nothing registers the file for you. Register the component globally, because `resolveComponent` only sees global components: + + + +```ts +import { createApp } from "vue"; + +import CmsElementDailymotion from "./components/cms/CmsElementDailymotion.vue"; + +const app = createApp({}); +app.component("CmsElementDailymotion", CmsElementDailymotion); +``` + + + ## Going deeper - + + diff --git a/apps/docs/src/guides/cms/overwriting-cms.md b/apps/docs/src/guides/cms/overwriting-cms.md index 859896671d..72ff70797c 100644 --- a/apps/docs/src/guides/cms/overwriting-cms.md +++ b/apps/docs/src/guides/cms/overwriting-cms.md @@ -2,54 +2,46 @@ head: - - meta - name: og:title - content: "Overwriting and CMS blocks" + content: "Overwrite CMS components" - - meta - name: og:description - content: "See how to overwrite CMS blocks" + content: "Replace a section, block or element of cms-base-layer with your own component." - - meta - name: og:image content: "https://frontends-og-image.vercel.app/Overwrite%20CMS.png" --- -# Overwrite CMS blocks in Nuxt 3 APP (Nuxt Layer way) +# Overwrite CMS components -To override CMS blocks in the Nuxt 3 app, create a `.vue` file with the cms block name in the components directory. -Because of auto importing, CMS component import will be overwritten by the new file with the same name. +`@shopware/cms-base-layer` renders every CMS section, block and element with a component of its own. To replace one, create a component with the same name in your application. Sections, blocks and elements are all overridden the same way. -More about auto imports can be found [here](https://nuxt.com/docs/guide/concepts/auto-imports) +This applies to the components of `@shopware/cms-base-layer`. If you render CMS pages with your own components, you decide how they are resolved and where they live. -## Example how to overwrite the cms block product listing +## Where the file goes -We have this cms element **component** from **cms-base package**: -`packages/cms-base-layer/app/components/public/cms/block/CmsBlockProductListing.vue` - -If we want to create our own product listing **component** in **vue-starter-template** the correct place would be: -`templates/vue-starter-template/app/components/cms/block/CmsBlockProductListing.vue` +CMS components are looked up at runtime with `resolveComponent`, so an override has to sit under a components directory your `nuxt.config.ts` registers with `global: true`. An override anywhere else is never found, and the layer's component keeps rendering with no error. -:::tip HINT 💡 +In `vue-starter-template` that directory is `app/components/cms/`. It is registered with `pathPrefix: false`, so the component name comes from the filename alone and the subdirectory depth under it does not matter. -❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.** -::: +The [Rendering CMS Pages recipe](../../frontends-recipes/cms/rendering.html) explains the lookup behind this. -### Resolving folder structure +## Example: the product listing block -**Nuxt** is resolving names by folder structure, so if you have: -`/components/public/some/name.vue` -then component name is **PublicSomeName**. +The layer ships this block: +`packages/cms-base-layer/app/components/public/cms/block/CmsBlockProductListing.vue` -You can repeat folder structure in name like: -`/components/cms/Name.vue` -`/components/cms/CmsName.vue` +To replace it in `vue-starter-template`, create: +`templates/vue-starter-template/app/components/cms/block/CmsBlockProductListing.vue` -These are the same components resolving as **CmsName**. 💡 +## Internal components -### Internal components +❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.** -As example: some components use `SwSharedPrice.vue` to show prices with corresponding currency for products in many places like product card, product details page and so on. In order to change the way how the price is displayed consistently - create a one component with a name `SwSharedPrice.vue` and that's it. The new component will be used everywhere where is "imported" (autoimported actually). +The components shared between blocks and elements, the ones starting with the `Sw` prefix such as [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwProductCard.vue), can be overridden too. They are auto-imported rather than resolved at runtime, so in `vue-starter-template` the override goes into `app/components/`. A `SwSharedPrice.vue` there, for example, changes how prices are displayed everywhere the layer shows one: product cards, the product detail page and so on. -### Generic CMS components +## Generic CMS components -Generic components are responsible for resolving each CMS element +`CmsGenericBlock` and `CmsGenericElement` resolve each block and element to its component. When nothing is registered under the expected name, they render the missing-component placeholder in development and nothing in production — see [Implement a Missing CMS Component](missing-component.html). - [CmsGenericElement.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/public/cms/CmsGenericElement.vue) - [CmsGenericBlock.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/public/cms/CmsGenericBlock.vue) diff --git a/examples/docs-code-examples/src/generated/concepts/shopping-experiences/data-component-mapping b/examples/docs-code-examples/src/generated/concepts/shopping-experiences/data-component-mapping deleted file mode 100644 index 884ec75d1e..0000000000 --- a/examples/docs-code-examples/src/generated/concepts/shopping-experiences/data-component-mapping +++ /dev/null @@ -1,4 +0,0 @@ -CmsPage - └── CmsSection (type e.g. "default", "sidebar") - └── CmsBlock (type e.g. "image-text", "product-slider") - └── CmsSlot (type e.g. "image", "text") diff --git a/examples/docs-code-examples/src/generated/guides/cms/create-blocks/example.vue b/examples/docs-code-examples/src/generated/guides/cms/create-blocks/example.vue index 047bcda1b3..2061a9ef99 100644 --- a/examples/docs-code-examples/src/generated/guides/cms/create-blocks/example.vue +++ b/examples/docs-code-examples/src/generated/guides/cms/create-blocks/example.vue @@ -1,4 +1,4 @@ - + - - diff --git a/examples/docs-code-examples/src/generated/guides/cms/create-elements/example-2.vue b/examples/docs-code-examples/src/generated/guides/cms/create-elements/example-2.vue index 3158a812bc..253062ff16 100644 --- a/examples/docs-code-examples/src/generated/guides/cms/create-elements/example-2.vue +++ b/examples/docs-code-examples/src/generated/guides/cms/create-elements/example-2.vue @@ -1,4 +1,4 @@ - + - - diff --git a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/reading-config-2.ts b/examples/docs-code-examples/src/generated/guides/cms/custom-elements/reading-config-2.ts deleted file mode 100644 index fbb2f94ed2..0000000000 --- a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/reading-config-2.ts +++ /dev/null @@ -1,6 +0,0 @@ -type CmsElementDailymotionConfig = { - dailyUrl: { - value: string; - source: "static"; - }; -}; diff --git a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/vue-apps.ts b/examples/docs-code-examples/src/generated/guides/cms/custom-elements/vue-apps.ts deleted file mode 100644 index 6bdd5f34c6..0000000000 --- a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/vue-apps.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createApp } from "vue"; - -import CmsBlockCustomBlock from "./components/cms/CmsElementDailymotion.vue"; - -const app = createApp({}); -app.component("CmsElementDailymotion", CmsBlockCustomBlock); diff --git a/examples/docs-code-examples/src/generated/guides/cms/customize-components/create-new-files.txt b/examples/docs-code-examples/src/generated/guides/cms/customize-components/create-new-files.txt deleted file mode 100644 index 5480091159..0000000000 --- a/examples/docs-code-examples/src/generated/guides/cms/customize-components/create-new-files.txt +++ /dev/null @@ -1,4 +0,0 @@ -demo-store/ -├─ components/ -| ├─ cms/ -| ├─ ├─ CmsBlockImageHighlightRow.vue diff --git a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/components/cms/CmsElementDailymotion.vue b/examples/docs-code-examples/src/generated/guides/cms/missing-component/components/cms/CmsElementDailymotion.vue similarity index 100% rename from examples/docs-code-examples/src/generated/guides/cms/custom-elements/components/cms/CmsElementDailymotion.vue rename to examples/docs-code-examples/src/generated/guides/cms/missing-component/components/cms/CmsElementDailymotion.vue diff --git a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-1-create-the-file b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-1-create-the-file index d317e133a9..f7ce24df57 100644 --- a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-1-create-the-file +++ b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-1-create-the-file @@ -1,3 +1,5 @@ your-project/ -└── components/ - └── {{ componentName }}.vue ← create this +└── app/ + └── components/ + └── cms/ + └── {{ componentName }}.vue ← create this diff --git a/examples/docs-code-examples/src/generated/guides/cms/custom-elements/reading-config.ts b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props-2.ts similarity index 100% rename from examples/docs-code-examples/src/generated/guides/cms/custom-elements/reading-config.ts rename to examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props-2.ts diff --git a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props.vue b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props.vue index 3fadf694a7..d7cb61af26 100644 --- a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props.vue +++ b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-2-define-the-props.vue @@ -1,4 +1,4 @@ - + diff --git a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-3-render-the-content.vue b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-3-render-the-content.vue index 6550eb83d2..df63acc41e 100644 --- a/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-3-render-the-content.vue +++ b/examples/docs-code-examples/src/generated/guides/cms/missing-component/step-3-render-the-content.vue @@ -1,4 +1,4 @@ - +