学习

Activity 4: Install PrimeVue into the Library Web Application · Jimmy Huang's Blog

bash

import './assets/main.css'
import 'bootstrap/dist/css/bootstrap.min.css'

import { createApp } from 'vue'
import App from './App.vue'

import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      darkModeSelector: '.app-dark',
    },
  },
})
app.mount('#app')

javascript

<div class="container-fluid mt-4" v-if="submittedCards.length">
    <DataTable
      class="w-100"
      :value="submittedCards"
      dataKey="id"
      paginator
      :rows="5"
      :rowsPerPageOptions="[5, 10, 20]"
    >
      <Column field="username" header="Username" sortable />
      <Column field="password" header="Password" />
      <Column header="Australian Resident">
        <template #body="{ data }">{{ data.isAustralian ? 'Yes' : 'No' }}</template>
      </Column>
      <Column field="gender" header="Gender" />
      <Column field="reason" header="Reason" />
    </DataTable>
  </div>

学习

学习

学习

Activity 4: Install PrimeVue into the Library Web Application

4.1 Open the terminal within our library web application, and run the following code:

4.2 Open `main.js` and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):

4.3 The goal of this activity is to add a user record to the PrimeVue DataTable after the user submits the form, as demonstrated below:

本页目录

学习

Activity 4: Install PrimeVue into the Library Web Application

4.1 Open the terminal within our library web application, and run the following code:

4.2 Open `main.js` and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):

4.3 The goal of this activity is to add a user record to the PrimeVue DataTable after the user submits the form, as demonstrated below:

本页目录

Activity 4: Install PrimeVue into the Library Web Application

4.1 Open the terminal within our library web application, and run the following code:

4.2 Open main.js and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):

4.3 The goal of this activity is to add a user record to the PrimeVue DataTable after the user submits the form, as demonstrated below:

Activity 4: Install PrimeVue into the Library Web Application

4.1 Open the terminal within our library web application, and run the following code:

4.2 Open main.js and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):

4.3 The goal of this activity is to add a user record to the PrimeVue DataTable after the user submits the form, as demonstrated below:

4.2 Open `main.js` and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):

4.2 Open `main.js` and configure PrimeVue to use a theme like Aura, as shown below (use updated version "@primevue" -> "@primeuix"):