JSFiddle - React, Tailwind, and code Playground

by Rocka

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@rocka/[email protected]/dist/muse-ui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rocka/[email protected]/dist/muse-ui.css">
<div id="app">
  <p>
    <label for="toggle">Click It: </label>
    <button id="toggle" @click="toggle">Toggle</button>
  </p>
  <component :is="component"></component>
</div>

JavaScript

Vue.use(MuseUI)

Vue.component('some-page', {
	template: `
  <div>
  	<p>some-page:</p>
		<mu-text-field placeholder="placeholder ..." v-model="input" action-icon="close"></mu-text-field>
	</div>`,
  data: () => ({
  	input: ''
  })
})

Vue.component('another-page', {
	template: `
  <section>
    <main>
    	<div>ANOTHER_ONE</div>
      <mu-text-field placeholder="ANOTHER_ONE" v-model="input" action-icon="inbox"></mu-text-field>
    <main/>
  </section>`,
  data: () => ({
  	input: ''
  })
})

new Vue({
	el: '#app',
  data: () => ({
  	component: 'some-page'
  }),
  methods: {
  	toggle() {
    	if (this.component === 'some-page') this.component = 'another-page';
      else this.component = 'some-page';
    }
  }
})