[Vuejs]-Inserting vue component into Html or even .blade (Laravel) files

by

1👍

In the above code snippet you don’t need the template tag and you have to call Datepicker instead of VueDatePicker. Code after correction:

const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
        return {
         date: ''
        }
       }
    }).mount("#app");
<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>
    <link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

</head>

<body>
  <header>
    <!-- place navbar here -->
  </header>
  <main>

    <div id="app">
        <Datepicker v-model="date"></Datepicker>
    </div>

  </main>
  <footer>
    <!-- place footer here -->
  </footer>
</body>
  </html>
👤joy2362

Leave a comment