Vonic - HelloWorld

Vonic 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/vonic/dist/vonic.min.js"></script>
<!-- Make a Mount Point -->
<von-app></von-app>

Babel + JSX

// Write Page Components
const Index = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'Home' }">
      <div class="page-content text-center">
        <p class="padding" v-text="msg"></p>
        
        <md-button class="button button-assertive" v-link="{ path: '/about' }">
        	<i class="ion-information-circled"></i> About
        </md-button>
      </div>
    </div>
  `,
  data() {
    return { msg: 'Hello, World!' }
  }
}

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

// Define Routes
const routes = {
  '/': {
    component: Index
  },

  '/about': {
    component: About
  }
}

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