Vue3 and Laravel + Inertia | Cookbook

Inhaltsverzeichnis [Anzeigen]

Allgemeines

Vue and CSS

Styling with CSS Variables

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script setup>
const theme = {
"menu": {
"background": 'black',
"item": {
"background": "green"
},
"subitem": {
"background": "green"
}
}
}
</script>
<script setup> const theme = { "menu": { "background": 'black', "item": { "background": "green" }, "subitem": { "background": "green" } } } </script>
<script setup>
const theme = {
    "menu": {
        "background": 'black',
        "item": {
            "background": "green"
        },
        "subitem": {
            "background": "green"
        }
    }
}
</script>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style scoped>
.menu {
background-color: v-bind('theme.menu.background');
}
<style scoped> .menu { background-color: v-bind('theme.menu.background'); }
<style scoped>
.menu {
    background-color: v-bind('theme.menu.background');
}

Using PrimeVue

Installation

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
❯ pnpm add primevue @primevue/themes
❯ pnpm add primevue @primevue/icons
❯ pnpm add primevue @primevue/themes ❯ pnpm add primevue @primevue/icons
❯ pnpm add primevue @primevue/themes
❯ pnpm add primevue @primevue/icons