Subscribe to our news
Check out more projects
Find us on Twitter
Find us on YouTube

## Changelog

OneUI Vue Edition 2.0 is a brand new version and it is incompatible with 1.x version. It is based on OneUI 5 design, Bootstrap 5, Vue.js 3, Pinia, Vue Router and uses the Composition API with `<script setup>` sugar syntax.

##### 2.0 Release

March 24, 2022

## Updating

OneUI Vue Edition will receive free updates in the future. One of the main goals was to make sure the update progress is going to be as easy as possible. Due to its nature (template), updating can become an unpleasant task.

Therefore we’ve tried to make it as easy as possible to let you apply your own overrides (in case you would like to) to Sass (`src/assets/scss/`) files without altering the original files. Please check Sass section for more info!

In general, the following core folders/files will have to be updated with each update:

- `public/assets/fonts/*`
- `src/assets/scss/oneui/*`
- `src/assets/scss/vendor/*`
- `src/directives/*`
- `src/components/*`

After copying over the new files, please make sure that you’ve read the changelog. If a new dependency is added, a file needs to be updated or a breaking change was made to your markup, we will let you know, so you can apply those additional changes in your project.

Finally, after applying any possible changes, you will just have to run `npm update --save` from your system’s console to update all your project’s dependencies.

Remember that it’s always a good idea to backup your work before updating to a new version!

When a new update becomes available, you will be able to download it from Themeforest. You can check the checkbox under the product ( Get notified by email if this item is updated), follow us on Twitter or subscribe to our news to stay up to date about the availability of new updates.

## Package

OneUI Vue Edition was built with extra care based on the valuable feedback we keep receiving over the past years working full-time on dashboard templates. It follows the best practices using the latest technologies and we really hope that you will enjoy working with it. OneUI Vue Edition will enable you to build fast, beautiful, user friendly web applications and websites that will work seamlessly across various screens and devices.

Let's have a look at the contents of the current package:

- `01 - OneUI Vue Edition Source`
  Includes the source code of the project. Vite tooling was used to build it, so feel free to have a look at the related section to get started.
- `Documentation`
  Of course, it includes current documentation!

## Bootstrap

Bootstrap is the world's most popular front-end component library. It is easy to use and offers a large variety of CSS as well as JavaScript components. OneUI Vue Edition uses this framework at its core and builds on top its unique UI layout and features. It extends the original styles and introduces new ones, featuring a modern and clean design.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component we already present in OneUI Vue Edition pages. If you find a feature in the official Bootstrap Docs you would like to use, feel free to, since they are all available in OneUI Vue Edition.

## Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of a dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR) and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

To use Vite and start building, you will first have to:

1. Download and install Node.js
   Prefer the LTS version (16.x) just to make sure there won't be any incompatibilities
2. Create your project folder and copy over the source code you will find in the package. Afterwards, install all required dependencies in your project’s folder by running the following command in your system’s console (you will have to run it from your project’s root folder):
   `npm install`

After you’ve successfully completed the previous steps, you will be able to run the following commands in your system’s console from your project’s root folder and start building:

Command | Description
--- | ---
`npm run dev` | Compiles and hot-reloads for development
`npm run build` | Compiles and minifies for production
`npm run lint` | Lints and fixes files

## Getting Started

Let us guide you through the vital folders and files you should focus first to start building your Vue.js based app.

File | Description
--- | ---
`public/` | In this folder you can place your static assets, eg your logo or custom fonts.
`index.html` | The main .html file where all build files will be auto injected.
`src/main.js` | This is the entry point of your app. This is where all vital libraries are added (Vue.js/Pinia/Vue Router), global plugins/components/directives are registered and the app is mounted. This is also where you can include the `router/starter.js` instead of the default one to get a clean starting point for your app.
`src/App.vue` | This is the main .vue file where all required styles for our app are included, the main.scss file along with all available color themes. It is recommended to comment out the color themes you won’t use to minimize your CSS file size.
`src/store/template.js` | In this file, our Pinia store can be found. This is where you can set various layout options, a default color theme or change other options which are available in all your components. For some options, you might want to set them afterwards in each layout variation file under `src/layouts/variations/` folder based on your preferences and in the same way we already present. Pinia is a state management pattern and library for Vue.js. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
`src/router/index.js` | This is where all our routes are specified. The layout variation that will be used for each view or a subset of views is set in here as well.
`src/views/*` | All page views can be found in here. This is the place where you can add your own or alter existing ones.
`src/layouts/partials/*` | This is where you can change the content of the common sections (sidebar, side overlay, header and footer). Each section has its own file which you can alter to match your preferences. For more info regarding layout, be sure to have a look at the next section as well. The main navigation is auto created in `src/layouts/partials/Sidebar.vue` from the array found in `src/data/menu.js` by default. To alter the menu, you can change this array accordingly or 'feed' the `<BaseNavigation>` component with a custom navigation array similar to the one we already provide.

## HTML

OneUI Vue Edition features a super flexible, smart and powerful layout which can be used to create dashboard and website pages with minimum effort using the same resources.

The layout offers many options which can be enabled just by adding or removing a class in the `#page-container` element. We’ve already set up everything for you though, so you can easily change the available layout options through the Pinia store found in `src/store/index.js`.

Layout partials and variations are created for reusable and customizable layouts:

Files | Description
--- | ---
`src/layouts/BaseLayout.vue` | All base layout elements and available slots are added in this folder. Moreover, all vital layout classes are accodringly set to the `#page-container` element based on the default Pinia store values.
`src/layouts/variations/*` | This is where you can create layout variations for your pages which extend `BaseLayout.vue` layout. By default we are including various examples with 3 of them being the main layout variations. `Simple.vue` does not include any partials (sidebar, side overlay, header and footer) and can be used for login or landing pages. The `Backend.vue` variation includes all partials by default and it is the one used for all backend pages. The `BackendBoxed.vue` does not include sidebar and side overlay, uses the default footer but overrides the header content. You can set which layout each page will use in your `src/router/index.js` file. The `BackendStarter.vue` variation is based on the backend and showcases how you can easily override the content of the partials (it is used for the starter router `src/router/starter.js` as an example).
`src/layouts/partials/*` | All partials (sidebar, side overlay, header and footer) can be found here.

Let’s have a quick look at the generic HTML structure and get familiar with the layout approach:

    <!doctype html>
    <html lang="en">
        <head>
            <!-- Title, Meta, Icons and Web Fonts -->
        </head>
        <body>
            <!-- Page Container -->
            <div id="page-container">
                <!-- Page loader -->
                <div id="page-loader"></div>

                <!-- Side Overlay-->
                <div id="side-overlay">
                    ...
                </div>
                <!-- END Side Overlay -->

                <!-- Sidebar -->
                <div id="sidebar">
                    ...
                </div>
                <!-- END Sidebar -->

                <!-- Header -->
                <header id="page-header">
                    ...
                </header>
                <!-- END Header -->

                <!-- Main Container -->
                <main id="main-container">
                    ...
                </main>
                <!-- END Main Container -->

                <!-- Footer -->
                <footer id="page-footer">
                    ...
                </footer>
                <!-- END Footer -->
            </div>
            <!-- END Page Container -->
        </body>
    </html>

## Sass

OneUI Vue Edition was built with Sass using the latest `SCSS` syntax. It is a powerful CSS pre-processor which extends the CSS language, adding features that allow variables, mixins, functions and many other techniques, enabling you to make CSS that is more maintainable and extendable.

If you would like to extend the framework and add your own styles or UI components, feel free to use the Sass files included in the source code under `src/assets/scss/*` folder. When you serve your project through Vite , you will instantly see live all the changes you make.

It is highly recommended though, to use the custom files we created for you to add your own styles and make the updating process easier. They can be found in `src/assets/scss/custom/`. In `src/assets/scss/custom/_variables.scss` you will be able to override any variables you want and in `src/assets/scss/custom/_main.scss` you will be able to add your own styles or override current ones.

Let’s have a better look at the Sass files structure:

Files | Description
--- | ---
`oneui/*` | Includes all OneUI Sass files which follow the structure Bootstrap uses. All Bootstrap overrides can also be found in here (variables/mixins/functions/styles). We basically override what we can (using the available Bootstrap variables) or want (functions/mixins) to match our needs. Then we override the styles we can’t alter with variables and add our own components. This method allows us to easily update Bootstrap, resuse its features in our styles and also export a smaller main CSS file with fewer style overrides.
`vendor/*` | Includes all third party styles (eg animation.css, fontawesome icons, simple line icons). In here, you will also find all style overrides for the integrated Vue.js plugins we showcase which are not included in the main stylesheet but in each .vue file where the plugin is used.
`custom/*` | This is your own folder in which you can add your own styles or overrides. Making your own changes in here will enable you to just update all other folders (when an update becomes available) without worrying of erasing your changes.
`main.scss` | This is the file where everything comes together. From here you could easily update the compiled CSS file by commenting out the components you won’t use in your project. This way, you can achieve the smallest possible footprint for your main CSS file by only including what you need.

OneUI Vue Edition uses the Sass styles from the OneUI 5.x version. Please have in mind though, that not all styles are directly interchangeable between those two versions because various changes are applied to both color themes, vendor styles and a few variables.

## Directives

Directives are actually HTML attributes that can be added to your HTML elements or components to init custom functionality. They all start with `v-` to indicate that they are a special Vue.js attributes. We created the following directive which is included and registered globally, meaning that you can use it out of the box in all your components. Directives are created in the `src/directives/` folder.

Usage (attribute) | Description
--- | ---
`clickRipple.js`
`v-click-ripple` | You can add the attribute to your buttons if you would like an animated ripple to appear on click. Inspired by material design.

## Components

Components are reusable Vue instances with a name. We created a few vital ones to assist you even further when setting up your pages. Our custom components are created in the `src/components/` folder and start with `Base` name. They are all globally registered in `main.js` (except `BasePageHeading.vue`), so you can use them in all pages out of the box. Let’s have a better look into them:

### `BaseBackground.vue`

Renders a div with the specified image as its background and an inner div with a class (for color overlays), useful for creating sections in landing pages or dashboard headings. For example:

    <BaseBackground image="url/to/image" inner-class="bg-black-50">
      ... Your Content ...
    </BaseBackground>

Properties | Type | Default | Description
--- | --- | --- | ---
`image` | String | - | The url of the image to show
`inner-class` | String | - | The class of the inner div. Usually a background color with opacity class
`image-top` | Boolean | `false` | Align the image background to the top
`image-bottom` | Boolean | `false` | Align the image background to the bottom
`image-fixed` | Boolean | `false` | Set the background to fixed for a parallax effect

### `BaseBlock.vue`

Renders one of the most vital elements of the template. You would usually use blocks to structure your content in most backend pages. For example:

    <BaseBlock title="Block Title">
      <p>
        ...Your content...
      </p>
    </BaseBlock>

Properties | Type | Default | Description
--- | --- | --- | ---
`tag` | String | `div` | The HTML tag of the component (div, a)
`title` | String | - | The title of the block
`subtitle` | String | - | The subtitle of the block
`bordered` | Boolean | `false` | Bordered block style
`rounded` | Boolean | `true` | Rounded block style
`themed` | Boolean | `false` | Themed block style
`transparent` | Boolean | `false` | Transparent block style
`fx-shadow` | Boolean | `false` | Shadow fx block style
`fx-pop` | Boolean | `false` | Pop fx block style
`fx-rotate-right` | Boolean | `false` | Rotate right fx block style
`fx-rotate-left` | Boolean | `false` | Rotate left fx block style
`link-shadow` | Boolean | `false` | Shadow style for block links
`link-pop` | Boolean | `false` | Pop style for block links
`link-rotate` | Boolean | `false` | Rotate style for block links
`header-class` | String | - | Add additional classes to default block-header
`options-class` | String | - | Add additional classes to default block-options
`content-class` | String | - | Add additional classes to default block-content
`header-bg` | Boolean | `true` | Add the default header background
`header-rtl` | Boolean | `false` | Reverse the order of elements in header
`content-full` | Boolean | `false` | Add full padding to the bottom of the default block-content
`ribbon` | [Boolean, String] | `false` | Enable the ribbon or enable it and also specify its content by setting a string value.
`ribbon-left` | Boolean | `false` | Position ribbon to the left
`ribbon-bottom` | Boolean | `false` | Position ribbon to the bottom
`ribbon-bookmark` | Boolean | `false` | Set the bookmark type to your ribbon
`ribbon-modern` | Boolean | `false` | Set the modern type to your ribbon
`ribbon-variant` | String | `primary` | Set a different ribbon variant (primary, info, warning, danger, success, glass)
`mode-loading` | Boolean | `false` | Loading block mode
`mode-fullscreen` | Boolean | `false` | Fullscreen block mode
`mode-pinned` | Boolean | `false` | Pinned block mode
`mode-content-hide` | Boolean | `false` | Hide block’s content
`mode-hide` | Boolean | `false` | Hide block itself
`btn-option-fullscreen` | Boolean | `false` | Enable the fullscreen mode button
`btn-option-pinned` | Boolean | `false` | Enable the pinned mode button
`btn-option-content` | Boolean | `false` | Enable the content toggle button
`btn-option-close` | Boolean | `false` | Enable the close mode button

Slot Name | Description
--- | ---
`header` | For custom rendering the whole header section in your block
`title` | For custom rendering the title content in block header
`subtitle` | For custom rendering the subtitle content in block header
`options` | For custom rendering the options content in your block header
`ribbon` | For custom rendering the ribbon content (if ribbon is enabled)
`content` | For custom rendering additional content in your block

You can also set ref properties to your `BaseBlock` elements and access their methods as required. Examples can be found in the Block API page.

Method | Description
--- | ---
`fullscreenToggle()` | Toggles fullscreen mode
`fullscreenOn()` | Sets fullscreen mode to on
`fullscreenOff()` | Sets fullscreen mode to off
`pinnedToggle()` | Toggles pinned mode
`pinnedOn()` | Sets pinned mode to on
`pinnedOff()` | Sets pinned mode to off
`contentToggle()` | Toggles block’s content visibility
`contentShow()` | Makes block’s content visible
`contentHide()` | Hides block’s content
`statusToggle()` | Toggles block’s status
`statusLoading()` | Sets block’s status to loading
`statusNormal()` | Sets block’s status to normal
`open()` | Makes block itself visible
`close()` | Hides block itself

### `BaseNavigation.vue`

Renders the main navigation element based on a given array of objects and needs to be imported in your view to use it. Includes functionality for handling custom features such as dropdown toggling, setting active submenus/links, rendering multiple levels or hiding the sidebar on each link click if we are on small screens (`to` needs to be set to the name of a route, not its path). For example:

    <BaseNavigation :nodes="navigation"></BaseNavigation>

    let navigation = [
      {
        name: 'Dashboard',
        to: 'backend-dashboard',
        icon: 'si si-speedometer'
      },
      {
        name: 'User Interface',
        heading: true
      },
      {
        name: 'Blocks',
        icon: 'si si-energy',
        subActivePaths: '/backend/blocks',
        sub: [
          {
            name: 'Styles',
            to: 'backend-blocks-styles'
          },
          {
            name: 'Options',
            to: 'backend-blocks-options'
          },
          {
            name: 'Forms',
            to: 'backend-blocks-forms'
          },
          {
            name: 'Themed',
            to: 'backend-blocks-themed'
          },
          {
            name: 'API',
            to: 'backend-blocks-api'
          }
        ]
      }
    ]

Properties | Type | Default | Description
--- | --- | --- | ---
`nodes` | Array | - | The nodes of the navigation
`sub-menu` | Boolean | `false` | If true, a submenu will be rendered (used when recursively creating the menu)
`dark` | Boolean | `false` | Dark mode for menu
`horizontal` | Boolean | `false` | Horizontal menu in large screen width
`horizontal-hover` | Boolean | `false` | Hover mode for horizontal menu
`horizontal-center` | Boolean | `false` | Center mode for horizontal menu
`horizontal-justify` | Boolean | `false` | Justify mode for horizontal menu

### `BasePageHeading.vue`

Renders a dashboard page heading with a Title and a subtitle along with an extra section to the right, usually for adding an action button or a breadcrumb. For example:

    <BasePageHeading title="Title" subtitle="Your Subtitle">
      <template #extra>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-alt">
            <li class="breadcrumb-item">
              <a class="link-fx" href="javascript:void(0)">Generic</a>
            </li>
            <li class="breadcrumb-item" aria-current="page">Blank</li>
          </ol>
        </nav>
      </template>
    </BasePageHeading>

Properties | Type | Default | Description
--- | --- | --- | ---
`title` | String | - | The title of page heading section
`subtitle` | String | - | The subtitle of page heading section

Slot Name | Description
--- | ---
`extra` | For custom rendering the right content of the page heading

## Plugins

Various plugins are showcased in `OneUI Vue Edition`. These are either pure Vue.js plugins or Vue.js wrappers of popular JavaScript libraries. It is very straightforward to use them in your page views. You will just have to import them along with their CSS styles (if any) and afterwards add them in your templates by using the components they provide.

In each example plugin page, we include inline comments along with the required files you have to add as well as links to their online repository where you can find their documentation. For some of them, custom style overrides are also included after their default ones to alter the look and feel and make them compatible with the included color themes.

You can remove any dependency from your project by running `npm remove module-name` from your system’s console. In a similar way, you can install any new plugin/library/tool by using `npm install module-name`.

## Quick Tips

### CSS prefixes for older browsers

You can update the following array in `package.json` accordingly if you would like the Autoprexifer to auto add CSS prefixes for older browser versions. By default, the following are used based on Bootstrap's default preferences:

    "browserslist": [
      ">= 0.5%",
      "last 2 major versions",
      "not dead",
      "Chrome >= 60",
      "Firefox >= 60",
      "Firefox ESR",
      "iOS >= 12",
      "Safari >= 12",
      "not Explorer <= 11"
    ]

### High resolution screens

The UI will look crispy clear on high resolution screens and if you would like your images to look great, too, then you will have to use the `srcset` attribute of the `<img>` element. For example, if you have an image `url/to/image.jpg` and its high resolution version `url/to/image@2x.jpg`, you will have to use the following markup:

    <img src="url/to/image.jpg" srcset="url/to/image@2x.jpg 2x" alt="Image Description">

The browser will auto select the best version and load it accordingly. Older browsers will ignore the `srcset` attribute and will load the regular image as usual.

### Favicons

If you would like to auto create your favicons from your image/logo, you can use the free service over at http://realfavicongenerator.net

## Credits

We’ve used the following resources as listed. Special thanks to all the authors for their hard work!

Tooling
Vite

Frameworks
Vue.js
Bootstrap

Photos
MyPhotoPack
Unsplash

Icons
Font Awesome 6
Simple Line Icons

Libraries/Scripts
@chenfengyuan/vue-countdown
@ckeditor/ckeditor5-vue
@ckpack/vue-color
@fullcalendar/vue3
@highlightjs/vue-plugin
@popperjs/core
@tiptap/vue-3
@vueform/slider
@vuelidate
dropzone
nprogress
pinia
simplebar
sweetalert2
vue-chart-3
vue-cropperjs
vue-dataset
vue-easy-lightbox
vue-flatpickr-component
vue-router
vue-select
vue-star-rating

## Thank You!

Thank you so much for supporting our work by choosing one of our products! We wish you all the best with your upcoming projects and endeavors in life! If you would like to check out more of our work, be sure to visit our website.

Have a great day and happy coding!