Universal Svelte and Vuejs

svelte-example.md

Universal Svelte

Files

App.html

• components/Footer.html
• components/Header.html
• components/Search.html

Server - App.html

<Header/>
<Search id="search-root-element" />
<Footer />

<script type="text/javascript">
  import Header from './components/Header.html';
  import Search from './components/Search.html';
  import Footer from './components/Footer.html';

  export default {
    components: {
      Header,
      Search,
      Footer
    }
  }
</script>

Client.js

import Search from './components/Search.html';

const target = document.querySelector('#search-root-element');

new Search({
	target,
	hydrate: true
});

vuejs-example.md

Universal Vuejs

Files

Main.js

• components/Footer.vue
• components/Header.vue
• components/Search.vue

Server - main.js

import Vue from 'vue'
import { store } from './store'

import Header from './components/Header.vue'
import Search from './components/Search.vue'
import Footer from './components/Footer.vue'

let vm = new Vue({
  el: '#app',
  template: `
    <div id="app">
      <header></header>
      <search
        id="search-root-element"
        data-server-rendered="true"
      ></search>
      <footer></footer>
    </div>
  `,
  components: {
    Header,
    Search,
    Footer
  }
  store: store
});

Client.js

import Vue from 'vue'
import Search from './components/Search.vue'
import { store } from './store'

let localSearch = Vue.extend({
  extends: Search
});

let vm = new localSearch({
  propsData: {
    search: store.state.search
  }
});

// second boolean tells it should hydrate existent DOM node,
// see: https://vuejs.org/v2/api/#vm-mount
vm.$mount('#search-root-element', true);