Ok, I performed the suggested updates, deleted the
node_modules folder and reinstalled, but it still doesn't show anything.
I'm sure I'm doing something dumb, but I can't figure it out.
event-bus.js
Code: Select all
import {EventBus} from 'primevue/utils';
export default EventBus();
package.json
Code: Select all
{
"name": "ultima-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^4.12.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"primeflex": "2.0.0",
"primeicons": "^4.1.0",
"primevue": "^3.5.1",
"vue": "^3.1.1",
"vue-router": "^4.0.8"
}
}
main.js
Code: Select all
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'primevue/resources/primevue.min.css'; //required: PrimeVue components
import 'primeicons/primeicons.css'; //required: PrimeIcons
import './App.scss'; //your styles and overrides
createApp(App).use(router).mount('#app')
App.vue (copied from the Ultima src folder to overwrite CLI generated App.vue file)
I've only shown the first part here.
Code: Select all
<template>
<div :class="layoutContainerClass" @click="onDocumentClick">
<AppTopBar :horizontal="menuMode==='horizontal'" :topbarMenuActive="topbarMenuActive" :activeTopbarItem="activeTopbarItem" :mobileTopbarActive="mobileTopbarActive" @topbar-mobileactive="onTopbarMobileButtonClick"
@menubutton-click="onMenuButtonClick" @topbar-menubutton-click="onTopbarMenuButtonClick" @topbaritem-click="onTopbarItemClick" @rightpanel-button-click="onRightPanelButtonClick"
:searchActive="searchActive" @search-toggle="onSearchToggle" @search-click="onSearchClick" @search-hide="onSearchHide"></AppTopBar>
<div class="menu-wrapper">
<div class="layout-menu-container" @click="onMenuClick">
<AppInlineMenu v-if="inlineMenuPosition === 'top' || inlineMenuPosition === 'both'" v-model:active="inlineMenuTopActive" @change-inlinemenu="onChangeInlineMenu" inlineMenuKey="top" :menuMode="menuMode"></AppInlineMenu>
<AppMenu :model="menu" :menuMode="menuMode" :active="menuActive" :mobileMenuActive="mobileMenuActive" :isSlimOrHorItemClick="isSlimOrHorItemClick" @menuitem-click="onMenuItemClick" @root-menuitem-click="onRootMenuItemClick"></AppMenu>
<AppInlineMenu v-if="inlineMenuPosition === 'bottom' || inlineMenuPosition === 'both'" v-model:active="inlineMenuBottomActive" @change-inlinemenu="onChangeInlineMenu" inlineMenuKey="bottom" :menuMode="menuMode"></AppInlineMenu>
</div>
</div>
<div class="layout-main">
<AppBreadcrumb></AppBreadcrumb>
<div class="layout-content">
<router-view />
</div>
<AppFooter :layoutMode="layoutMode" />
</div>
<AppConfig :menuMode="menuMode" @menu-mode-change="onMenuModeChange" @layout-mode-change="onLayoutModeChange" @menu-theme="onMenuTheme"
:layoutMode="d_layoutMode" @topbar-theme="onTopbarThemeChange"
v-model:inlineMenuPosition="inlineMenuPosition" @inlinemenu-change="onInlineMenuPositionChange"
:theme="theme" :themes="themes" @theme-change="changeTheme" :menuTheme="d_menuTheme" :menuThemes="menuThemes"
:topbarTheme="d_topbarTheme" :topbarThemes="topbarThemes"></AppConfig>
<AppRightPanel :expanded="rightPanelActive" @content-click="onRightPanelClick" @hide="onHideClick"></AppRightPanel>
<div v-if="mobileMenuActive" class="layout-mask modal-in"></div>
</div>
</template>
<script>
import AppTopBar from './AppTopbar.vue';
import AppInlineMenu from './AppInlineMenu.vue';
import AppRightPanel from './AppRightPanel.vue';
import AppMenu from './AppMenu.vue';
import AppConfig from './AppConfig.vue';
import AppFooter from './AppFooter.vue';
import AppBreadcrumb from './AppBreadcrumb.vue';
import EventBus from './event-bus';
export default {
name: 'home',
emits: ['layout-mode-change', 'menu-theme', 'menuTheme', 'topbar-theme', 'topbarTheme', 'layoutModeChange'],
props: {
topbarTheme: String,
menuTheme: String,
layoutMode: String
},
data() {
return {
d_topbarTheme: this.topbarTheme,
d_menuTheme: this.menuTheme,
d_layoutMode: this.layoutMode,
I did NOT copy the router information, as I just want the basic app structure with menu layout, etc.
So here's the default router info as created by the CLI:
src/router/index.js
Code: Select all
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
BTW, where can I get the latest updates to the theme? I only got the license keys.
Thanks,
Doug