Babylon is an application template for Vue 3 based on create-vue, the recommended way to start a Vite-powered Vue projects. To get started, extract the contents of the zip file, cd to the directory and install the dependencies with npm or yarn.
npm install
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 using the Babylon template.
npm run dev
Babylon consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.
Main menu is located at src/layout/AppLayout.vue file. Update the model property to define the menu of your application using PrimeVue MenuModel API.
data() {
return {
menu : [
{
label: 'Favorites', icon: 'pi pi-fw pi-home',
items: [
{label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/'},
]
},
},
//...
Breadcrumb component at the topbar section is dynamic and retrieves the path information from the router using the meta.breadcrumb property.
{
path: '/uikit/formlayout',
name: 'formlayout',
meta: {
breadcrumb: [{ parent: 'UI Kit', label: 'Panel' }],
},
component: () => import('@/views/uikit/PanelsDemo.vue')
},
Only the folders that are related to the layout needs to move in to your project.
import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '@/layout/AppLayout.vue';
const routes = [
{
path: '/',
component: AppLayout,
children: [
/* your pages */
],
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
});
export default router;
Babylon provides 18 PrimeVue themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside public/theme/ folder such as public/theme/theme-light/indigo/theme.css.
A custom theme can be developed by the following steps.
Here are the variables required to create a light theme.
$primaryColor: #6366f1 !default;
$primaryColor: #0F8BFD;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
@import '../../../src/assets/sass/theme/_theme_light';
For a dark theme, filename should be theme-dark.scss and the imported file needs to change to use the dark version.
$primaryColor: #6366f1 !default;
$primaryColor: #0F8BFD;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
@import '../../../src/assets/sass/theme/_theme_dark';
Dynamic theming is built-in to the template and implemented by including the theme via a link tag instead of bundling the theme along with a configurator component to switch it. In order to switch your theme dynamically as well, it needs to be compiled to css. An example sass command to compile the css would be;
sass --update public/theme:public/theme*Note: The sass command above is supported by Dart Sass. Please use Dart Sass instead of Ruby Sass.
Initial integration with an existing Vite application and the migration process is similar. During an update, only the src/layout folder, public/layout and public/theme folders need to be updated, see the "Integration with Existing Vite Applications" section for more information. Important changes are also documented at CHANGELOG.md file.