JSFiddle - React, Tailwind, and code Playground

by benosman

HTML

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.min.js"></script>
<div id="app"></div>

JavaScript

const App = { template: `<router-view></router-view>` };
const Home = {
  template: `<div>
  <p>$route: {{$route.fullPath}}</p>
  <input id="search" v-model="searchQuery" @input="updateSearch">
  </div>`,
  data() {
    return {
    	searchQuery: null,
      index: 0,
    };
  },
  methods: {
    updateSearch() {
      console.log('navigate')
      this.$router.push({
        query: {
          search: this.searchQuery,
        },
      });
    },
  },
};

const router = new VueRouter({
  mode: 'history',
  routes: [{
    name: 'Home',
    path: '/home',
    component: Home,
  }, {
    path: '*',
    redirect: {
      name: 'Home',
    },
  }],
});


const app = new Vue({
  router: router,
  el: '#app',
  render: h => h(App),
});