How to make modular components in Vue? (Coming from React)

[AmodeusR]

So I started to learn VueJS coming from a React background and I ended up coming across the need to make a component, and I wanted it to be as flexible as possible, so I decided to take a modular approach. The problem is: The modular approach I know of utilizes of JSX capabilities, which is not VueJs's approach. I know JSX is usable in VueJs for some options to use/allow it in projects, but I wanted to know if there's a similar approach that is 100% native to VueJs and as good, simple and effective as it is in React.

[LinusBorg]

It might be helpful to have an example of what you consider to be a "modular component" (a React example is fine).

The term "modular" can be read to mean a lot of different things.

[AmodeusR]

It seems it's called Compound components. It's basically how shadcn-ui components work if you ever took a look at that. So the component is made like this:

const Button = ({ children }) => {
  return (
    <button>
      {chilren}
    </button>
  )
}

const ButtonIcon = ({ icon }) => {
  return (
    <Icon icon={icon} />
  )
}

const ButtonText = ({ children }) => {
  return (
    <p>
      {children}
    </p>
  )
}

Button.Icon = ButtonIcon;
Button.Text = ButtonText

export default Button;

And you use it like this:

import Button from "@/components";

const Component = () => {
    return (
      <Button>
        <Button.Icon icon="myIcon" />
        <Button.Text> Click here </Button.Text>
      </Button>
  );
}

With this approach to a component, I can easily reorder the elements without needing to tinker with props like "rightIcon/leftIcon" or similar stuff. I gave a very basic example, but you can think how useful it can be when you have plenty of elements in one component and it frequently changes place.

I know I can use JSX within vue, but I was wondering if there's anythimg similar and as modular as this that is 100% native to vue.

[LinusBorg]

You can do something like this when you use .vue files: Playground

The limiting factor here is that .vue files require to have one file per component. You can do pretty much what you do in React in Vue, when you are willing to use JSX.