Vue 3 and PrimeVue 3
7 | 8 |Sakai is an application template for Vue based on the Vue CLI that provides out-of-the-box standard 10 | tooling for Vue projects. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.
11 |
12 | npm install
13 |
14 |
19 | yarn
20 |
21 | Next step is running the application using the serve script and navigate to http://localhost:8080/ to view the application. 24 | That is it, you may now start with the development of your application using the Sakai template.
25 | 26 |
27 | npm run serve
28 |
29 | Following commands are derived from create-app-app.
33 |
34 | "npm run serve": Starts the development server
35 | "npm run build": Builds the application for deployment.
36 | "npm run lint": Executes the lint checks.
37 | "npm run test:unit": Runs the tests.
38 |
39 | Sakai consists of 2 main parts; the application layout and the resources. App.vue inside src folder is the main component containing the template for the base layout 43 | whereas required resources such as SASS structure for the layout are placed inside the src/assets/ folder.
44 | 45 |Main layout is the template of the App.vue, it is divided into a couple of child components such as topbar, menu and footer. Here is template of the 47 | App.vue component that implements the logic such as menu state, layout modes and so on. 48 |
49 | 50 |Menu is a separate component defined in AppMenu.vue file based on PrimeVue MenuModel API. In order to define the menuitems, 52 | navigate to data section of App.vue file and define your own model as a nested structure using the menu property.
53 | 54 |Dependencies of Sakai are listed below and needs to be added to package.json.
56 | 57 |
58 |
59 | {
60 | "primevue": "~3.11.0",
61 | "primeicons": "~5.0.0",
62 | "primeflex": "~3.1.2",
63 | }
64 |
65 |
66 |
67 | Sakai uses the free Saga, Arya and Vela themes which are distributed within PrimeVue, however it can be used with any PrimeVue theme as well such as material, tailwind and bootstrap.
69 | 70 |In case you'd like to customize the layout variables, open _variables.scss file under src/layout folder. Saving the changes 72 | will be reflected instantly at your browser.
73 | 74 |
76 |
77 | $fontSize:1rem;
78 | $borderRadius:12px;
79 | $transitionDuration:.2s;
80 |
81 |
82 | Use this page to start from scratch and place your custom content.
7 |PrimeVue components internally use PrimeIcons library, the official icons suite from PrimeTek.
6 | 7 |PrimeIcons is available at npm, run the following command to download it to your project.
9 | 10 |
11 | npm install primeicons --save
12 |
13 | PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. 17 | A standalone icon can be displayed using an element like i or span
18 | 19 |
20 | <i class="pi pi-check"></i>
21 | <i class="pi pi-times"></i>
22 |
23 | Size of the icons can easily be changed using font-size property.
30 | 31 |
32 | <i class="pi pi-check"></i>
33 |
34 |
39 | <i class="pi pi-check" style="font-size: 2rem"></i>
40 |
41 | Special pi-spin class applies continuous rotation to an icon.
47 |
48 | <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
49 |
50 | PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.
56 |
57 | <Menu :model="items" />
58 |
59 |
62 | import {PrimeIcons} from 'primevue/api';
63 |
64 | export default {
65 | data() {
66 | return {
67 | items: [
68 | {
69 | label: 'Update',
70 | icon: PrimeIcons.REFRESH,
71 | to: '/update'
72 | },
73 | {
74 | label: 'Delete',
75 | icon: PrimeIcons.TIMES,
76 | to: '/delete'
77 | }
78 | ]
79 | }
80 | }
81 | }
82 |
83 | Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.
87 | 88 |Confirmation Component Content via Child Route
5 |Payment Component Content via Child Route
5 |Personal Component Content via Child Route
5 |Seat Component Content via Child Route
5 |
6 | 
16 | 
6 | 
16 | 
11 | 
6 | Frequently Asked Questions
20 |Solution Center
31 |Permission Manager
42 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt 25 | quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
26 | 27 | 28 |