Как сделать обертку для элементов с текстом на vue?

Для создания обертки для элементов с текстом во Vue.js, вы можете использовать компоненты и слоты.

1. Создайте новый компонент, например, назовем его "TextWrapper".

2. В шаблоне компонента "TextWrapper" определите необходимую разметку, которую вы хотите использовать для обертки текста. Например, вы можете использовать элемент div для создания контейнера, содержащего текст.

<template>
  <div class="text-wrapper">
    <slot></slot>
  </div>
</template>

3. Внутри разметки компонента используется слот <slot></slot>. Он представляет собой зарезервированное место, в которое будет вставлен контент, переданный во время использования компонента.

4. Зарегистрируйте компонент "TextWrapper" где-то в вашем приложении, чтобы его можно было использовать в других частях кода. Наиболее распространенным способом регистрации компонента является его глобальная регистрация перед созданием экземпляра корневого Vue приложения.

Vue.component('text-wrapper', TextWrapper);

5. Теперь вы можете использовать компонент "TextWrapper" в любом другом компоненте или в шаблоне приложения и обернуть его содержимое с помощью тега компонента.

<template>
  <text-wrapper>
    <p>Это текст, который будет обернут внутри "TextWrapper" компонента.</p>
  </text-wrapper>
</template>

6. Компонент "TextWrapper" будет отображать содержимое, переданное внутрь слота, вместе с оберткой, которую вы определили в его шаблоне. В результате, в браузере вы увидите текст, обернутый внутри элемента div с классом "text-wrapper".

Это пример простой обертки для текста с использованием компонентов и слотов во Vue.js. Вы можете настроить компонент "TextWrapper" и его шаблон в соответствии с вашими потребностями и стилями оформления.