title: How to get Web3js to work inside a VueJS component?
body: <p>I want to use web3 with node and vuejs to connect to an Ethereum Parity node.</p>
  
  <ul>
  <li>I am using vue-cli with webpack.</li>
  <li>Parity is running on localhost.</li>
  <li>When I visit <code>http://localhost:8545</code> I see which tells me Parity is listening.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/bMP7b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bMP7b.png" alt="enter image description here"></a></p>
  
  <p>I created the following Vue component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;h1&gt;{{ title }}&lt;/h1&gt;
      &lt;h2&gt;{{ accounts() }}&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Web3 from 'web3'
  
    export default {
      name: 'hello',
      http: {
        root: '/root',
        headers: {
          AccessControlAllowOrigin: 'true'
        }
      },
      data () {
        return {
          title: 'web3.js App'
        }
      },
      methods: {
        accounts: function () {
          const ethereumUri = 'http://localhost:8545'   // 8540, 8545, 8180
  
          let web3 = new Web3(new Web3.providers.HttpProvider(ethereumUri))
  
          if (!web3.isConnected()) {
            return 'Unable to connect to ethereum node at ' + ethereumUri
          } else {
            let accounts = web3.eth.accounts
            return accounts
          }
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I run <code>npm run dev</code> I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/93rwe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/93rwe.png" alt="enter image description here"></a></p>
  
  <p>On the console I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/oKU9Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oKU9Q.png" alt="enter image description here"></a></p>
  
  <p>I attempted to add an Access-Control-Allow-Origin header using this configuration code, but it did not fix it. The console error seems to indicate that the Parity node needs to set this header option.</p>
  
  <pre><code>    http: {
        root: '/root',
        headers: {
          AccessControlAllowOrigin: 'true'
        }
      },
  </code></pre>