emilyruby

<template>
  <div>
    <GlobalEvents
      @focus="handleAppFocus"
    ></GlobalEvents>
    <!-- Component Contents -->
  </div>
</template>

<script>

emilyruby

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

emilyruby

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

emilyruby

const routes = [
  {
    path: '/',
    component: App,
    meta: {
      title: 'My Website- Homepage'
    }
  },
  {
    path: '/contact',

emilyruby

let node = {
  tag: 'div'
  attributes: { id: 'container' }
  children: [
    // where the contained div would go
  ]
};

emilyruby

<div id='container'>
  <div id='baby'>
    Hello
  </div>
</div>

emilyruby

function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

function HomePage() {

emilyruby

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

emilyruby

class List extends React.Component {
  render() {
    return (
      <ul>
        <ListItem />
      </ul>
    );
  }
}

emilyruby

<ul>
  <div>
    <li>Hello</li>
    <li>World</li>
  </div>
</ul>