Question 15164 in Laravel Question posted in
The official Laravel Documentation can be found here.

style element-plus component in vue 3 – Laravel

I need help with styling component el-date-picker from element plus, can’t figure it out.

Code for a text input from component:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
<div v-if="error" class="form-error">{{ error }}</div>

Text input component call:

<text-input v-model="form.sender.text" :error="form.errors.sender" class="pb-8 pr-6 w-full lg:w-1/3" label="Nadpis" :disabled="true" />

gives this (whitch is correct:

enter image description here

but, code for element-plus datetime picker from component:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<el-date-picker :id="id" ref="input" v-model="selected" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" type="datetime" />
<div v-if="error" class="form-error">{{ error }}</div>

Element-plus component call:

<DatetimeInput v-model="form.stamp" :error="form.errors.stamp" class="pb-8 pr-6 w-full lg:w-1/3" label="Add time" />

makes this:

enter image description here

What i did wrong? How to style this, i read the documentation from element-plus website but i don’t understand it and can’t find styles file from it.

Tags:

2

Answers


  1. 0

    you need import css style

    import 'element-ui/lib/theme-chalk/index.css';
    Login or Signup to reply.
  2. 0

    In my main.ts

    import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import "./app.css";

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

export default app;

    My el-date-picker
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search