Instructions for IIIF Vue App

gistfile1.txt

# Instructions for IIIF Vue App

## Add some Data
```
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install (have backup copy on flash drives)
$ npm run dev
```

## Add our IIIF helper scripts

### Manifesto
Manifesto is a library of convenience methods for working with IIIF Resources
```
$ npm install manifesto.js --save
```
### Manifestions
Manifestations are prebuilt libraries of components that make it easy to work with IIIF Resources (via Manifesto mixins) in the framework of your choice
```
$ npm install manifestation-vue --save
```

## Add some Data (IIIF manifest)
```
mkdir src/data
cd src/data
curl -o src/data/manifest.js https://rawgit.com/sdellis/edb41a691ea9933bf25ab482b7f6ba2e/raw/a4c5f9155c3e09938bc20345623d3f52fbb21261/manifest.js
```

## Build your app
Open src/App.vue and change `import Hello from './components/Hello'` to 
```
import {mixins, Tree, Thumbnails} from 'manifestation-vue'
import manifest from './data/manifest'
import manifesto from '../node_modules/manifesto.js/dist/server/manifesto.js'
const manifestation = Object.assign(manifesto.create(JSON.stringify(manifest)), mixins)
```
Change 
```
  components: {
    Hello
  }
```
To
```
  components: {
    Tree,
    Thumbnails
  },
  props: {
    tree: { toc: manifestation.getVueTree() },
    thumbnails: { thumbnails: manifestation.photos() }
  }
```
Change 
```
<hello></hello>
```
To 
```
<tree></tree>
<thumbnails></thumbnails>
```


## Check it out!
Save that and type in the commandline:
```
npm start
```