+
+
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7674075..0e77165 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ import TreeTable from 'primevue/treetable';
import TriStateCheckbox from 'primevue/tristatecheckbox';
import VirtualScroller from 'primevue/virtualscroller';
-import CodeHighlight from '@/components/CodeHighlight';
+import CodeHighlight from '@/components/CodeHighlight.vue';
import BlockViewer from '@/components/BlockViewer.vue';
import '@/assets/styles.scss';
@@ -117,7 +117,9 @@ app.directive('tooltip', Tooltip);
app.directive('badge', BadgeDirective);
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);
-app.directive('code', CodeHighlight);
+
+app.component('CodeHighlight', CodeHighlight);
+app.component('BlockViewer', BlockViewer);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);
@@ -209,6 +211,4 @@ app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('VirtualScroller', VirtualScroller);
-app.component('BlockViewer', BlockViewer);
-
app.mount('#app');
diff --git a/src/views/utilities/Documentation.vue b/src/views/utilities/Documentation.vue
index a251929..67a943a 100644
--- a/src/views/utilities/Documentation.vue
+++ b/src/views/utilities/Documentation.vue
@@ -7,88 +7,86 @@
- Sakai is an application template for Vue based on the Vue CLI that provides out-of-the-box standard tooling for Vue projects. To get started, clone the + Sakai is an application template for Vue based on the create-vue, the recommended way to start a Vite-powered Vue projects. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.
-
+
npm install
-
-
+
yarn
+
-Next step is running the application using the serve script and navigate to http://localhost:5173/ to view the application. That is it, you may now start with the development of your application using the Sakai template.
-Next step is running the application using the serve script and navigate to http://localhost:8080/ to view the application. That is it, you may now start with the development of your application using the Sakai template.
- -
-npm run serve
-
-Following commands are derived from create-app-app.
-
-"npm run serve": Starts the development server
-"npm run build": Builds the application for deployment.
-"npm run lint": Executes the lint checks.
-"npm run test:unit": Runs the tests.
-
-- 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 whereas required resources such as SASS structure for the - layout are placed inside the src/assets/ folder. -
- -- 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 App.vue component that implements the logic such as menu state, - layout modes and so on. -
+Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.
+- Menu is a separate component defined in AppMenu.vue file based on PrimeVue MenuModel API. In order to define the menuitems, navigate to data section of App.vue file and define your own model as a nested structure - using the menu property. -
+Main menu is defined at src/layout/AppMenu.vue file.
-Dependencies of Sakai are listed below and needs to be added to package.json.
- -
-
-{
- "primevue": "~3.11.0",
- "primeicons": "~5.0.0",
- "primeflex": "~3.1.2",
-}
-
-
+ Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.
+ +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.
++ Sakai theming is based on the PrimeVue theme being used. Default theme is lara-light-indigo. +
In case you'd like to customize the layout variables, open _variables.scss file under src/layout folder. Saving the changes will be reflected instantly at your browser.
++ In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes will be reflected instantly at your browser. +
-
-
-$fontSize:1rem;
-$borderRadius:12px;
-$transitionDuration:.2s;
-
-
+