` tag. To use another tag or component as the wrapper use the `wrapper` prop.
```html
```
This component's role is to render a Prismic embed field safely. Because Prismic is not able to predict the nature of your embed output you must style it appropriately. For that purpose, you can target the data attributes generated by `
` in your CSS.
```css
/* Style text type embed */
[data-oembed-type="text"] {
/* ... */
}
/* Style YouTube embed */
[data-oembed-provider="YouTube"] {
/* ... */
}
/* Style embed from figma.com */
[data-oembed*="figma.com"] {
/* ... */
}
```
## ``
```tsx
// Not necessary when using the plugin
import prismicVueComponents from "@prismicio/vue/components";
const SliceZone = prismicVueComponents.common.SliceZone;
```
Vue component that renders content from a Prismic slice zone using Vue components for each type of slice.
For example, if a slice zone contains a Text slice followed by an Images slice, `` will render `` and `` in a list.
```html
```
Alongside the `slices` prop, an object of slice type IDs (for example: "text") mapped to its Vue component (for example: ``) should be provided to the `components` prop. Components can be supplied in a variety of ways.
```tsx
import FooSlice from "~/slices/FooSlice";
const components = {
// Explicit import
foo: FooSlice,
// Assuming "BarSlice" is registered globally in your Vue application
bar: "BarSlice",
// Async components are also a great way to achieve code splitting
baz: () => import("~/slices/BazSlice.vue"),
};
```
Slice components receive four props:
* `slice`: The slice object being rendered.
* `index`: The index of the slice within the slice zone.
* `slices`: The list of all slice objects in the slice zone.
* `context`: Arbitrary data passed to the ``'s `context` prop.
Because defining props in Vue.js is verbose, we provide a helper function to do so: `getSliceComponentProps()`. With it, a simple slice component could look like this.
```html
```
If you have data that needs to be shared with all slice components, provide a value to the `context` prop of the `` component. The value will be passed to each slice component as a `context` prop.
```html
```
By default, a "TODO" component will be rendered with a warning if a component is not provided for a slice type.
This default can be overridden by using the `defaultComponent` prop. The default component is passed the same props listed above.
```html
```
The default "TODO" component will not be rendered in production (i.e. when `process.env.NODE_ENV` is `production`).
The `` component wraps its output in a `` tag, if you need another `wrapper` tag, or component, to be used, you can use the wrapper prop.
```html
```
> Upgrading from `vue-slicezone`
>
> `` from `@prismicio/vue` replaces the component from the `vue-slicezone` package. If you are currently using `vue-slicezone` with a `resolver` prop, you can still pass that prop to the updated component.
>
> ```
> :slices="document.data.body"
> :resolver="({ sliceName }) => {
> switch (sliceName) {
> case 'text':
> return TextSlice;
>
> case 'images':
> return ImagesSlice;
> }
> }"
> />
> ```
>
> The `resolver` prop is deprecated and will be removed in a future major release. Please upgrade to the simpler `components` prop using the object format described above.