# Showcase

Websites built with VuePress:

**Vue Ecosystem**

* [vue-cli](https://cli.vuejs.org/)
* [vuex](https://vuex.vuejs.org/)
* [vue-server-renderer](https://ssr.vuejs.org/)

**Community**

* [cr-vue](https://cr-vue.mio3io.com/)
* [vuesax](https://lusaxweb.github.io/vuesax/)

## Todo Features

VuePress is still a work in progress. There are a few things that it currently does not support but are planned:

- Plugin support
- Blogging support

Contributions are welcome!

## Development

> Please make sure your version of Node.js is greater than 8.

``` bash
yarn
yarn dev  # serves VuePress' own docs with itself
yarn test # make sure your code change pass the test
```

## License

[MIT](https://github.com/vuejs/vuepress/blob/master/LICENSE)

@aleksejdix

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

@aleksejdix

Progressive STATIC SITE GENERATOR

@aleksejdix

Install

yarn global add vuepress

echo '# Hello Vue Meetup' > README.md

vuepress dev

@aleksejdix

add more pages

echo '# About' > about.md

echo '# Team' > team.md

@aleksejdix

CONFIG

create

.vuepress/config.js 

 

@aleksejdix

nav: [
  { text: 'Home', link: '/' },
  { text: 'About', link: '/about' },
]

NAVIGATION

@aleksejdix

sidebar: [
  ['/', 'Home']
  ['/about', 'About']
]

SIDEBAR

@aleksejdix

I18n

  locales: {
    '/': { lang: 'en-US'},
    '/it/': { lang: 'it-CH'},
    '/de/': { lang: 'de-CH'},
    '/fr/': { lang: 'fr-CH'}
  },

@aleksejdix

SIDEBAR I18n

  themeConfig: {
    locales: {
      '/':    { sidebar: [ [ '/',    'Hallo' ] ] },
      '/it/': { sidebar: [ [ '/it/', 'Ciao' ] ] },
      '/de/': { sidebar: [ [ '/de/', 'Grüezi' ] ] },
      '/fr/': { sidebar: [ [ '/fr/', 'Bonjour' ] ] }
    }
  }

@aleksejdix

BUILt IN SEARCH

 

search: true, // default
searchMaxSuggestions: 10

@aleksejdix

OFFLINE with SW

serviceWorker: true

@aleksejdix

Powerful
Content Contol

@aleksejdix

MARKDOWN

[link](./home.md) => <router-link>

:green_heart: => 💚

[[toc]] => Page navigation

@aleksejdix

MARKDOWN

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

@aleksejdix

VUE in  markdown

{{ 1 + 8 }}

<div v-for="n in 10">{{n}}<div>

@aleksejdix

VUE SFC in  markdown

<custom-component>
    <h1 slot="header">
        Vuepress is cool
    </h1>
</custom-component>

@aleksejdix

custom Components

you can create components inside 
.vuepress/components folder

@aleksejdix

PersonAlized
Custom Themes

@aleksejdix

EJECT

vuepress eject <src>

@aleksejdix

OWN THEME

create .vuepress/theme/Layout.vue

and build your custom theme

themes are default Vue SPA's

@aleksejdix

facts

codesplitting per page

seo friendly

works offline

works on any static server

THANKS!

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

Vue + press

By oddEVEN

Vue + press

  • 1,393