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: {
    template: `
        <h1>Welcome to Main Component</h1>
        <StandaloneButton />
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.