[SOLVED] Getting started with style

[azazello]

Hello, I'm new to primevue so please bear with me. I read the documentation, but I think I'm missing something very basilar. In a completely new project, with PrimeVue installed and mounted in the vue app and the styles imported and the component styles working, I can't get a default styling on text. Is this the intended behaviour?

Thank you for your help!

Luca

Code: Select all

<template>
  <div id="app">
    <div class="app-container">
      <h1>Test title</h1>
      <p>Lorem ipsum etc etc</p>
      <form>
        <InputText type="text" v-model="text"/>
        <Button type="submit" label="Submit"/>
      </form>
    </div>
  </div>
</template>

Code: Select all

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

import PrimeVue from "primevue/config";
import Button from "primevue/button";
import InputText from "primevue/inputtext";

import "primevue/resources/themes/saga-blue/theme.css"
import "primevue/resources/primevue.min.css"
import "primeicons/primeicons.css"


const app = createApp(App);

// app.use(router);
app.use(store);
app.use(PrimeVue);

app.component("InputText", InputText);
app.component("Button", Button);

app.mount("#app");

[azazello]

I ended up solving this. In case anybody else finds themselves wasting a ton of time on the issue, it looks like you have to manually set some default styles more or less like this:

Code: Select all

body {
  background-color: var(--surface-b);
  font-family: var(--font-family);
  color: var(--text-color);
}

Have a nice day!