Skip to content

Instantly share code, notes, and snippets.

@siegy22
Created December 8, 2017 15:41
Show Gist options
  • Save siegy22/3b2b471455e181d8806c9389f8e4bd0a to your computer and use it in GitHub Desktop.
Save siegy22/3b2b471455e181d8806c9389f8e4bd0a to your computer and use it in GitHub Desktop.
Unstaged
modified README.md
@@ -2,7 +2,12 @@
[![Build Status](https://travis-ci.org/bierik/plone-vuejs.svg?branch=master)](https://travis-ci.org/bierik/plone-vuejs)
-> A simple [Vue.js](https://vuejs.org/) SDK to build web sites easily on top of the [Plone RESTAPI](https://github.com/plone/plone.restapi).
+> A simple [Vue.js](https://vuejs.org/) SDK to build web sites easily on top of the [plone.restapi](https://github.com/plone/plone.restapi).
+
+### Prerequests
+
+- [Yarn](https://yarnpkg.com/lang/en/docs/install/)
+- Google Chrome >= 59 for e2e testing
## Usage
@@ -12,10 +17,10 @@ Install the dependency in your project:
yarn add plone-vue
```
-Install the `Traverser` plugin:
+Install the `Traverser` plugin in your `main.js`:
```javascript
-import Traverser from `plone-vue`;
+import Traverser from 'plone-vue';
Vue.use(Traverser);
```
@@ -41,7 +46,7 @@ var app = new Vue({
},
}
});
-````
+```
Define the vuejs component.
@@ -54,6 +59,7 @@ Define the vuejs component.
</ul>
</section>
</template>
+
<script>
import { basecomponent } from 'plone-vue';
@@ -64,15 +70,16 @@ export default {
</script>
```
-In the component you will a context provided through a property. The context contains all data fetched from the plone.
+In the component you will receive a context provided through a property. The context contains all data fetched from the plone.
Notice the import of the `basecomponent`. The basecomponent needs to be attached to your component as a mixin so the context property is available.
-Use the `<traverser-view>` component to define where vuejs renders the output.
+Use the `<traverser-view>` component to define where vuejs renders the output (usually `App.vue`).
```html
<template>
<traverser-view></traverser-view>
</template>
+
<script>
export default {
name: 'app',
@@ -86,11 +93,6 @@ See `/src` for a full working example.
This section will show you how you setup the development environment and make the tests running.
-### Prerequests
-
-- [Yarn](https://yarnpkg.com/lang/en/docs/install/)
-- Google Chrome >= 59 for e2e testing
-
### Installing
Clone the project:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment