Vite JS - Select, Date

[PyIter]

I'm having trouble with getting the form components Select and Text to work in Laravel Jetstream / Inertia / Vue and now VIte instead of Webpack (with ts). Normal text input is functioning as expected.

The logic is working. Seems the styling is not loaded correctly. Tried some things with scss couldnt find a solution just yet.

 <script lang="ts" setup >
import AppLayout from '@/Layouts/AppLayout.vue';
import Button from "@/Jetstream/Button.vue";
import { ref, computed } from 'vue';
import { Inertia } from '@inertiajs/inertia'
import {
  Form,
  Input,
  Select,
} from "@protonemedia/form-components-pro-vue3-tailwind3-simple";

interface Props {
    errors?: any
}

const props = withDefaults(defineProps<Props>(), {})

const interests = [
    { value: "tailwind", label: "Tailwind CSS" },
    { value: "bootstrap", label: "Bootstrap" },
    { value: "inertiajs", label: "Inertia.js" },
    { value: "livewire", label: "Livewire" },
    { value: "laravel", label: "Laravel" },
];
</script>
<template>
    <AppLayout title="Dashboard">
        <div class="py-12">
            <div class="max-w-7xl mx-auto px-4 lg:px-8">
                <Form :errors="errors">
                      <Select name="interests" :options="interests" label="Choose your interests" choices />
                </Form>
            </div>
        </div>
    </AppLayout>
</template>

[altercode]

I'm facing exact same problem. I'm using Vite + Laravel 9 + Breeze with Inertia and Vue.

[ArielMejiaDev]

I have the same issues with both, date picker and select

[PyIter]

Vite doens't resolve the tilde ~.

First make sure you have the npm packages sass and stylus installed.

Make sure you are importing the styling in your component or globally.

import "@protonemedia/form-components-pro-vue3-tailwind3-simple/src/choices.scss"; and import "@protonemedia/form-components-pro-vue3-tailwind3-simple/src/flatpickr.styl";

See

https://github.com/vitejs/vite/issues/5764#issuecomment-982407332

If you add it to your vite.config.js the styling should be shown.

If above breaks something (But be aware that this may collide with other aliases you want to support in your JS files.) you can do the following manually:

Dropdown / Choices:

Remove the tilde in node_modules/@protonemedia/form-components-pro-vue3-tailwind3-simple/src/choices.scss On line 3.

The styling should now be visible.

Date / Flatpicker

Make sure you are importing the styling in your component or globally.

Remove the tilde in node_modules/@protonemedia/form-components-pro-vue3-tailwind3-simple/src/flatpickr.styl On line 9.

The styling should now be visible.

[joeelia]

The styling should now be visible.

My guy coming in clutch.

To make life easier I just put those css files in their own CSS folder instead of relying on the node_modules.

👊💥💥💥

[bradyrenting]

Your issue should be resolved when (and if) my PR (#5) is getting merged 🙂