Refactor
parent
de119bb8b0
commit
2572561902
|
@ -92,8 +92,7 @@ Open the nuxt configuration file and add the css dependencies.
|
||||||
```javascript
|
```javascript
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
css: [
|
css: [
|
||||||
"primevue/resources/themes/lara-light-blue/theme.css",
|
"primevue/resources/themes/lara-light-blue/theme.css"
|
||||||
"primevue/resources/primevue.css"
|
|
||||||
],
|
],
|
||||||
build: {
|
build: {
|
||||||
transpile: ["primevue"]
|
transpile: ["primevue"]
|
||||||
|
|
|
@ -21,8 +21,7 @@ export default {
|
||||||
code1: {
|
code1: {
|
||||||
basic: `export default defineNuxtConfig({
|
basic: `export default defineNuxtConfig({
|
||||||
css: [
|
css: [
|
||||||
"primevue/resources/themes/lara-light-blue/theme.css",
|
"primevue/resources/themes/lara-light-blue/theme.css"
|
||||||
"primevue/resources/primevue.css"
|
|
||||||
],
|
],
|
||||||
build: {
|
build: {
|
||||||
transpile: ["primevue"]
|
transpile: ["primevue"]
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme and core styles are the required css files to be imported, visit the
|
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
|
||||||
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
@ -16,10 +16,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
code1: {
|
code1: {
|
||||||
basic: `//theme
|
basic: `//theme
|
||||||
import "primevue/resources/themes/lara-light-indigo/theme.css";
|
import "primevue/resources/themes/lara-light-indigo/theme.css";`
|
||||||
|
|
||||||
//core
|
|
||||||
import "primevue/resources/primevue.min.css";`
|
|
||||||
},
|
},
|
||||||
code2: {
|
code2: {
|
||||||
basic: `body {
|
basic: `body {
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
|
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
|
||||||
<strong>Note</strong>: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new <strong>Unstyled</strong> mode
|
<strong>Note</strong>: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach.
|
||||||
will be provided as an alternative to the default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed by the end of Q2 2023.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
|
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
|
||||||
|
|
Loading…
Reference in New Issue