Several render problems

UI Components for Vue
Post Reply
lucas1068
Posts: 1
Joined: 19 Jun 2021, 18:33

19 Jun 2021, 18:56

Hello, I'm having render issues with PrimeVue 3.5.1. I'll list to you the ones that I've tested, keep in mind that this only happens in my current environment which is not the case for Codesanbox or other app for replicating code.

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')

prime.js at /src

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)
}
vue.config.js at the root

Code: Select all

module.exports = {
  css: {
      loaderOptions: {
        sass: {
            sassOptions: {
                includePaths: ['./node_modules/'],
            },
            sourceMap: true,
            prependData: `@import "~@/sass/helpers/_variables.scss";`
        }
      },
      sourceMap: true
  }
}
If you need more information, please let me know because I'm using Prime for an important project and I really want to solve this. Thank you!!

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests