Directly Using Standalone Components in Templates

Show how standalone components can be directly used in other component templates without needing to import an entire module.

// StandaloneButtonComponent.js (define a standalone component)
export default {
  name: 'StandaloneButton',
  template: `
    <button @click="clickHandler">Click Me!</button>
  `,
  methods: {
    clickHandler() {
      console.log('Button clicked!');
    }
  }
};

Define a standalone component named StandaloneButton, which is just a simple button that logs 'Button clicked!' to the console when clicked.

<script type="module">
  // MainComponent.js (import & use a standalone component in another component's template)
  import StandaloneButton from './StandaloneButtonComponent.js';
  
  export default {
    name: 'MainComponent',
    components: {
      StandaloneButton
    },
    template: `
      <div>
        <h1>Welcome to Main Component</h1>
        <StandaloneButton />
      </div>
    `
  };
</script>

Import the StandaloneButton component into a MainComponent and use it directly in the MainComponent's template without needing to create or import a separate module.