Using vue-styled-components in Single file component approach

Question

Here's my styled component file named 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;
`;

Then in my .vue single file component

<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>

Not working!

Error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Martin Godzina · Accepted Answer · 2018-09-19 08:07:33Z

3

You have to register the external components inside your export statement:

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

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

answered Sep 19, 2018 at 8:07

Martin Godzina

1,59512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using vue-styled-components in Single file component approach

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related