title: How do you access a Sequelize instance in a VueJS component?
body: <p>I've an Electron/Vue app built with electron-vue, but I can't work out how to access a Sequelize instance which is initialised in main.js, in the component <code>.vue</code> files.</p>
  
  <p>The <code>src/renderer/main.js</code> file contains the usual imports:</p>
  
  <pre><code>import Vue from 'vue'
  import axios from 'axios'
  
  import App from './App'
  import router from './router'
  import store from './store'
  
  import { Sequelize } from 'sequelize'
  import mysql2 from 'mysql2'
  
  // create sequelize instance as normal
  let db = new Sequelize(
    'database', 'user', 'password', {
      host: '1.2.3.4',
      dialect: 'mysql',
      dialectModule: mysql2
  })
  
  new Vue({
    components: { App },
    router,
    store,
    template: '&lt;App/&gt;'
  }).$mount('#app')
  </code></pre>
  
  <p>Now in a <code>src/renderer/components/Settings.vue</code> file I'd like to be able to make a database call, for example:</p>
  
  <pre><code>&lt;template&gt;
  ...
    &lt;button @click="testDatabaseConnection()"&gt;Test Database&lt;/button&gt;
  ...
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'Settings',
      methods: {
          navigate(route) {
              this.$router.push(route);
          },
  
          testDatabaseConnection() {
              // access the Sequelize instance
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Am I doing this in the right/wrong place?  How would you put the <code>db</code> variable into a scope that the Vue component can access?  Are there any best practices here that I should read up on?</p>