Versions:
primevue@3.5.1
core-js@3.14.0
vue@3.1.1
A major problem is the one with the Calendar component. You can read more detailed explanation here: https://stackoverflow.com/questions/679 ... ution-of-r
Another issue is with the Upload component, It doesn't show the native UI for selecting the actual files that you want to upload when you click the upload button.
Last but not least is the Divider component, It doesn't get render.
Those are my problems at the moment, since I haven't tried all the components yet. I really believe that this problem has something to do with the setting up of the project, so I'll share to you how I'm doing that.
main.js at /src
Code: Select all
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import initPrime from './prime'
import "primevue/resources/themes/saga-blue/theme.css" //theme
import "primevue/resources/primevue.min.css" //core css
import "primeicons/primeicons.css" //icons
import './sass/main.scss'
const app = createApp(App)
// Plugins
app.use(store)
app.use(router)
initPrime(app)
app.mount('#app')
Code: Select all
import PrimeVue from 'primevue/config'
// Components Imports
import ToastService from 'primevue/toastservice';
import Toast from 'primevue/toast';
import Message from 'primevue/message';
import Divider from 'primevue/divider';
import Card from 'primevue/card';
import Pdialog from 'primevue/dialog'
import Pbutton from 'primevue/button'
import SplitButton from 'primevue/splitbutton';
import Sidebar from 'primevue/sidebar';
import InputText from 'primevue/inputtext';
import InputNumber from 'primevue/inputnumber';
import Password from 'primevue/password';
import InputSwitch from 'primevue/inputswitch';
import MultiSelect from 'primevue/multiselect';
import Calendar from 'primevue/calendar';
import InputMask from 'primevue/inputmask';
import Editor from 'primevue/editor';
import Dropdown from 'primevue/dropdown';
import Menu from 'primevue/menu';
import TabMenu from 'primevue/tabmenu';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import FileUpload from 'primevue/fileupload';
import BlockUI from 'primevue/blockui';
export default function initPrime(vueApp) {
vueApp.use(PrimeVue, {
locale: {
weak: 'Débil',
medium: 'Aceptable',
strong: 'Fuerte',
passwordPrompt: 'Ingresa una contraseña',
},
ripple: true
})
vueApp.use(ToastService)
// Registro de componentes Prime
// Menu
vueApp.component('Menu', Menu)
vueApp.component('TabMenu', TabMenu)
// Button
vueApp.component('p-button', Pbutton)
vueApp.component('SplitButton', SplitButton)
// Overlay
vueApp.component('Sidebar', Sidebar)
vueApp.component('p-dialog', Pdialog)
// Panel
vueApp.component('Divider', Divider)
vueApp.component('Card', Card)
// Messages
vueApp.component('p-toast', Toast)
vueApp.component('Message', Message)
//Form
vueApp.component('InputText', InputText)
vueApp.component('InputNumber', InputNumber)
vueApp.component('Password', Password)
vueApp.component('InputSwitch', InputSwitch)
vueApp.component('MultiSelect', MultiSelect)
vueApp.component('Calendar', Calendar)
vueApp.component('InputMask', InputMask)
vueApp.component('Editor', Editor)
vueApp.component('Dropdown', Dropdown)
// Data
vueApp.component('DataTable', DataTable)
vueApp.component('Column', Column)
// FileUpload
vueApp.component('FileUpload', FileUpload)
// Misc
vueApp.component('BlockUI', BlockUI)
}
Code: Select all
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
includePaths: ['./node_modules/'],
},
sourceMap: true,
prependData: `@import "~@/sass/helpers/_variables.scss";`
}
},
sourceMap: true
}
}