New Vue Cli Project won't work with Ultima

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

11 Jun 2021, 21:36

I've followed the instructions provided by the documentation to add Ultima to a new Vue Cli project, however, I can't get it to work and there are several issues that the instructions don't cover.
  • In App.scss, the 'flags.css' file cannot be found. It needs to either be copied to src/assets/flags, or simply commented out (as it doesn't seem to be used).

    Code: Select all

    @import './assets/flags/flags.css';
  • 'event-bus.js' needs to be copied to the src folder and the 'mitt' dependency needs to be installed

I was able to get the project to compile and run, but nothing is displayed on the main page (no sidebar menu, etc.)

Project Template

Code: Select all

{
  "useTaobaoRegistry": false,
  "presets": {
    "ultima-presets": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"
    }
  }
}
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",
    "primeicons": "^4.1.0",
    "primevue": "^2.4.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "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",
    "mitt": "^2.1.0",
    "node-sass": "^4.12.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}
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')
Could you please include the actual, accurate steps to get a new project started with just the menu and main page structure?

Thanks,
Doug

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

14 Jun 2021, 08:30

Hi,

As far as I can see you're using Vue 3. You need to use PrimeVue 3 for example latest version 3.5.1.

PrimeVue 3.5.1 doesn't use Mitt and please update event-bus.js.

Directory of flags.css is changed and simply imported it in App.scss. You need to move it src/assets folder.

Best,

DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

14 Jun 2021, 19:28

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

DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

14 Jun 2021, 23:31

I finally got it to work.

I was missing a bunch of calls to app.component() and some app.directive() calls.

I'm new to Vue, but trial by fire is always the best way to learn. ;)

Just so I have a better understanding, can you please explain what these two sections of code are doing in the framework?

router.beforeEach

Code: Select all

router.beforeEach(function(to, from, next) {
    window.scrollTo(0, 0);
    next();
});
h(AppWrapper)

Code: Select all

const app = createApp({
    render () { return h(AppWrapper); }
});
And, as per my last post, is there a place where I can periodically download the latest version of the Ultima theme?

Thanks!

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

15 Jun 2021, 10:50

Hi,

First one is about vue-router and second one means that vue app will call AppWrapper firstly.

You can download all versions from Store.

Best,

Post Reply

Return to “Ultima - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests