title: Vue.js: How to specify props in single file component?
body: <p>I'm defining a <a href="http://vuejs.org/guide/application.html#Single-File-Components" rel="noreferrer">single file component</a></p>
  
  <p>I want to use <a href="http://vuejs.org/guide/components.html#Props" rel="noreferrer">props</a> option on that component.</p>
  
  <p>But where can I add the code?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;h1&gt;{{ msg }}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        // note: changing this line won't causes changes
        // with hot-reload because the reloaded component
        // preserves its current state and we are modifying
        // its initial state.
        msg: 'Hello World!'
      }
    }
  }
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  h1 {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>