Vonic 2 - Hello World

Vonic 2 Hello World Example.

HTML

<link rel="stylesheet" href="https://unpkg.com/vonic/dist/ionic/css/ionic.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vonic.min.js"></script>
<!-- Make a Mount Point -->
<von-app></von-app>

CSS

h2 {
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
  color: #888;
}

.page.has-navbar .page-content {
  padding-top: 100px;
}

Babel + JSX

// Write Page Components
const Index = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'Home' }">
      <div class="page-content text-center">
        <h2 class="padding" v-text="msg"></h2>

        <router-link class="button button-assertive" to="/about">
          <i class="ion-information-circled"></i> About
        </router-link>
      </div>
    </div>
  `,
  data() {
  	return {
	    msg: 'Hello! Vonic.'  
    }
  }
}

const About = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
      <div class="page-content text-center">
        <h2 class="padding">Nothing here.</h2>
      </div>
    </div>
  `
}

// Define Routes
const routes = [
  { path: '/', component: Index },
  { path: '/about', component: About }
]

// Start Your App
Vue.use(Vonic.app, {
  routes: routes
})