Sidebar

サイドバーを用いる事でユーザーがサイトの情報を見つけやすくなります

How it works

<Sidebar>を追加し、:routesを指定することで、サイドバーの実装が可能です。

vue

JSON file

[
 {
  "name": "Sample",
  "icon": "bi:award-fill",
  "color": "indigo",
  "children": [
   {
    "name": "SampleContent",
    "path": "#"
   },
   {
    "name": "SampleContent2",
    "path": "#"
   }
  ]
 },
 {
  "name": "Sample2",
  "icon": "bi:airplane-fill",
  "color": "green",
  "children": [
   {
    "name": "SampleContent3",
    "path": "#"
   }
  ]
 }
]

Integration

usebootstrapのIntegration機能を利用すれば、scriptの記載無しでサーバー等からのデータがコンポーネントのみで実現できます。

下記はこのドキュメントで利用されている記載です。

RouteMetaから現在のグループ名を取得し、グループに応じてapp.config.tsからデータを取得し、それをSideBarに反映しています。

詳細は integration を確認してください。

vue