Search code examples
javascripthtmlvue.jsfrontendcdn

how can I import a file vuejs component into index.html?

I'm using a CDN for VUEjs because I don't want to use webpack or render from the server.

index.html and test-component.vue are in the same folder

my index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VUE</title>

<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

</head>
<body>

<div id="app">

  <!--HERE I WANT TO USE MY COMPONENT-->
  <comp></comp> 
</div>

<script>

  //TRIED TO IMPORT MY COMPONENT
  import comp from './test-component.vue';

  const app = new Vue({
    el: '#app',
  });

</script>


</body>
</html>

my test-component.vue file:

<template>
  <h1>im a component</h1>
</template>

<script>
  console.log('testing component');
</script>
Solution

  • obviously .vue files are not natively supported by the browser

    there are 2 possible solutions: