title: How to work with CDN script only in Vue... unable to import component?
body: <p>I am a newbie to Vue.js. I don't like working with cli, so I am using CDN for everything but stuck in some unknown problem. I googled many thing but couldn't understand what going on. Any help would be really appreciated.</p>
  
  <p>Here is my index.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="8-utf" /&gt;
          &lt;meta name="author" content="Yash Gaikwad"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="keyword" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  
          &lt;link rel="stylesheet" href="style.css"&gt; &lt;!--Stylesheet--&gt;
  
  
          &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&amp;display=swap" rel="stylesheet"&gt; &lt;!--Google Fonts--&gt;
          &lt;script src="https://www.w3schools.com/lib/w3.js"&gt;&lt;/script&gt; &lt;!--W3.Css--&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js" type="text/babel"&gt;&lt;/script&gt;&lt;!--Bable Hosting--&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;!--Vue Hosting--&gt;
  
          &lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt; &lt;!--Vue Router--&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="app"&gt;
  
          &lt;/div&gt;
  
          &lt;script src="script.js"&gt;&lt;/script&gt; &lt;!--Javascript--&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my script.js</p>
  
  <pre><code>import app from "./main.vue"
  
  new Vue({
      el: "#app",
      data: {
  
      },
      methods: {
  
      },
      render: h =&gt; h(app)
  });
  
  </code></pre>
  
  <p>This is my main.vue (root component)</p>
  
  <pre><code>&lt;template&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from "./components/header.vue";
  import Footer from "./components/footer.vue";
  
  export default {
      components: {
          "app-header": Header,
          "app-footer": Footer
      }
  
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  
  </code></pre>
  
  <p>Seems to me that importing main.vue is causing error. And something is going wrong there. </p>
  
  <p>This are the errors I being getting from both ff and chrome</p>
  
  <pre><code>Uncaught SyntaxError: Cannot use import statement outside a module
  </code></pre>
  
  <pre><code>SyntaxError: import declarations may only appear at top level of a module
  </code></pre>
  
  <p>Thankyou every much guys.</p>