Not working include Vue datepicker Vue3 in Laravel and Vite

I'm trying to install https://vue3datepicker.com/ in my project and I can't. I use:

OS: Windows 10
Browser: Chrome Version 105.0.5195.127
Version Laravel: 9.19
Version VueJs: 3.2.36

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue';

import Datepicker from '@vuepic/vue-datepicker';

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => {
                        return tag.startsWith('datepicker') // (return true)
                    }
                }
            }
        }),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^3.1.0",
        "@vuepic/vue-datepicker": "^3.4.8",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.0"
    }
}

app.js

import './bootstrap';

import {createApp} from 'vue/dist/vue.esm-bundler.js';
window.createApp = createApp;


import '@vuepic/vue-datepicker/dist/main.css'

createApp.config.compilerOptions.isCustomElement = (tag) => {
    return tag.startsWith('datepicker')
}

welcome.blade.php

<head>
...
</head>
<body>
	<div id="appVue">
            @{{ message }}
            <datepicker v-model="date"></Datepicker>
        </div>						
</body>
   <script type="module">
            createApp({
                data() {
                    return {
                        date: '2022-09-22',
                        message: 'Hello Vue!'
                    }
                }
            }).mount('#appVue')
        </script>

after running npm run dev, everything is ok, I have no errors, but I get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'compilerOptions') at

I tested console.log(createApp.config) and it returns undefined

rodrigo.pedra

3 years ago

Level 56

Why are you registering a Vue component -- that is meant to be used inside a Vue application -- as a custom element?

The isCustomElement config property is to be used to tell Vue to ignore a particular tag and not to try to process it as a Vue component. Usually you are going to use this property if your project uses any Web Component, or when you are mixing frontend frameworks.

Also in your app.js it is not clear how are you creating and mounting your app. createApp is a function to be used to create a Vue app, and you will define the config options on the object returned from calling the createApp function.

Lastly, why are you importing createApp from 'vue/dist/vue.esm-bundler.js'? Are you using any special node.js config, or deno instead of node.js for your assets compilation?

A Vue component can be packaged as a Web Component, which is an open standard, this packaged version will include its own Vue runtime separated from your app's runtime. But from Vue Date Picker docs, they don't offer it as a Web Component

See this example from Vue Date Picker docs on how to use it in a Vue app without a build step:

https://vue3datepicker.com/installation/#browser

Or how to use it with a pre-compiled Vue app:

https://vue3datepicker.com/installation/#global

Also I highly recommend you to watch the free Vue 3 series here at Laracasts:

https://laracasts.com/series/learn-vue-3-step-by-step

To make the difference on Vue components and a Web component clearer here are the MDN docs on web components (which can be created without Vue):

https://developer.mozilla.org/en-US/docs/Web/Web_Components

And the Vue documentation on how to package a Vue component and export it as a standalone web component which emebes its own Vue runtime:

https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

Please or to participate in this conversation.