https://github.com/boussadjra/vue-pro-sidebar
responsive sidebar using vue.js with ability to change theme
https://github.com/boussadjra/vue-pro-sidebar
vue vuejs vuejs2 vuex webpack
Last synced: 2 months ago
JSON representation
responsive sidebar using vue.js with ability to change theme
- Host: GitHub
- URL: https://github.com/boussadjra/vue-pro-sidebar
- Owner: boussadjra
- Created: 2020-04-26T05:42:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T18:17:38.000Z (about 1 year ago)
- Last Synced: 2025-04-12T19:13:20.183Z (2 months ago)
- Topics: vue, vuejs, vuejs2, vuex, webpack
- Language: Vue
- Homepage: https://boussadjra.github.io/vue-pro-sidebar/
- Size: 9.92 MB
- Stars: 82
- Watchers: 5
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Pro Sidebar
A responsive sidebar template version of the [HTML pro side bar](https://github.com/azouaoui-med/pro-sidebar-template)
which has a configuration of files structure and Vue ecosystem including Vuex and Vue-router (with [code splitting feature](https://webpack.js.org/guides/code-splitting-async/))
it's developed using Vue-cli 3, it's serves as starter and saves your time when you launch a new project.
Original versions made by [Azouaoui Mohamed](https://github.com/azouaoui-med/)
Check [HTML version](https://github.com/azouaoui-med/pro-sidebar-template)
And [Angular version](https://github.com/azouaoui-med/angular-pro-sidebar)
And [React version](https://github.com/bRIMOs/react-pro-sidebar/) developed by [bRIMOs](https://github.com/bRIMOs/)
## Screenshots
## Demo
[Live Demo](http://boussadjra.github.io/vue-pro-sidebar)
## Quick start
Clone the project and go to its root and run
```
npm install
npm run serve
```
Navigate to `http://127.0.0.1:8080/`.
## Resources
This app doesn't use any CSS framework or assets provider.
## Directory structure
```js
-src
|_@use // it contains composition functions (from composition api plugin)
|_assets // it contains images, fonts ...
|_components // reusable components like buttons, dropdowns ...
|_directives // where you define your custom directives
|_layout // the page layout which contains header,sidebar and main content
|_routes // where you define the router and the different navigation routes
|_store // it contains the global Vuex store
|_styles // it contains the CSS and SCSS files
|_utils // where you define the global function helpers
|_views // the pages and routes which should be shown in the main content
|_app.scss // it contains common and global style
|_app.vue // the root component
|_main.js // it defines the vue instance and uses the different plugin
```
## License
This code is released under the [MIT]() license.