title: How to fix "ReferenceError: require is not defined" in vuejs
body: <p>I'm working on a vuejs + firebase project and i was trying to import firestore but when i access my page, this is displayed into the console: ReferenceError: require is not defined</p>
  
  <p>I'v tried to put the import section in mounted() but it says my that i need to put the import stuffs in the top, that's what i did</p>
  
  <p>This is below my html (register.html) body:</p>
  
  <pre><code>&lt;script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"&gt;&lt;/script&gt;
  
  &lt;!-- TODO: Add SDKs for Firebase products that you want to use
       https://firebase.google.com/docs/web/setup#config-web-app --&gt;
  
  &lt;script&gt;
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM",
      authDomain: "thelogoagency-3a11d.firebaseapp.com",
      databaseURL: "https://thelogoagency-3a11d.firebaseio.com",
      projectId: "thelogoagency-3a11d",
      storageBucket: "",
      messagingSenderId: "101296201242",
      appId: "1:101296201242:web:00d0e7e3554b518d"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  &lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="register.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The top of my register.js</p>
  
  <pre><code>// Required for side-effects
  require("firebase/firestore");
  
  var app = new Vue({
      el: "#root",
      data: {
          burgerClass: "navbar-burger",
          menuClass: "navbar-menu",
          mobileMenuIsActive: "",
          mobileMenuHasBeenClicked: false,
          firstNameInput: "",
          lastNameInput: "",
          emailInput: "",
          passwordInput: "",
          authError : "",
          emailErrorClass : "",
          emailErrorHelp : "",
          passwordErrorClass : "",
          passwordErrorHelp : "",
          inputClass: "input ",
          nameErrorHelp: "",
          isLoading: false,
          firebase: firebase,
          db: null,
          numberOfInit: 0
      },
  </code></pre>
  
  <p>And mounted()</p>
  
  <pre><code>        if(this.numberOfInit = 0)
              firebase.initializeApp({
                  apiKey: 'AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM',
                  authDomain: 'thelogoagency.tk',
                  projectId: '1:101296201242:web:00d0e7e3554b518d'
              });
  
              this.db = firebase.firestore();
              this.numberOfInit ++
              this.db.collection("users").add({
                  first: "Ada",
                  last: "Lovelace",
                  born: 1815
              })
              .then(function(docRef) {
                  console.log("Document written with ID: ", docRef.id);
              })
              .catch(function(error) {
                  console.error("Error adding document: ", error);
              });
  
      }
  </code></pre>
  
  <p>It should normaly just work fine because it copied it from firebase's doc.
  I know i'm probably doing it all wrong :) Thank for helping</p>