docs(ui): more code examples

This commit is contained in:
Guillaume Chau
2018-04-23 18:58:32 +02:00
parent 9853471edb
commit 9d6c4d8d4d

View File

@@ -261,7 +261,7 @@ api.describeTask({
}
],
// Default selected view when displaying the task details (by default it's the output)
defaultView: 'vue-webpack-dashboard'
defaultView: 'vue-webpack-dashboard-client-addon'
})
```
@@ -388,10 +388,21 @@ api.describeTask({
}
],
// Default selected view when displaying the task details (by default it's the output)
defaultView: 'vue-webpack-dashboard'
defaultView: 'vue-webpack-dashboard-client-addon'
})
```
Here is the client addon code that register the `'vue-webpack-dashboard'` component (like we saw earlier):
```js
/* In `main.js` */
// Import the component
import WebpackDashboard from './components/WebpackDashboard.vue'
// Register a custom component
// (works like 'Vue.component')
ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
```
![Task view example](./task-view.png)
### Custom views
@@ -417,6 +428,21 @@ api.addView({
})
```
Here is the code in the client addon that register the `'test-webpack-route'` (like we saw earlier):
```js
/* In `main.js` */
// Import the component
import TestView from './components/TestView.vue'
// Add routes to vue-router under a /addon/<id> parent route.
// For example, addRoutes('foo', [ { path: '' }, { path: 'bar' } ])
// will add the /addon/foo/ and the /addon/foo/bar routes to vue-router.
// Here we create a new '/addon/vue-webpack/' route with the 'test-webpack-route' name
ClientAddonApi.addRoutes('vue-webpack', [
{ path: '', name: 'test-webpack-route', component: TestView }
])
```
![Custom view example](./custom-view.png)
### Shared data