Использование vue-styled-components в подходе с одним файлом

Question

Вот мой стилизованный файл компонента с именем styles.js

import styled from 'vue-styled-components';

export const StyledTitle = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;

export const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;

Тогда в моем отдельном файловом компоненте .vue

<template>
  <div class="m-15">
    <StyledTitle>SUBMIT YOUR DETAILS</StyledTitle>
  </div>
</template>

<script>

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  }
};
</script>

Не работает!

Ошибка

[Vue warn]: неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

Answer 1

Вы должны зарегистрировать внешние компоненты в вашем заявлении на экспорт:

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  },
  //register components
  components: {
     StyledTitle
  }
};