CODEWITHSUNDEEP
vue.jsvuejs2
Holiday
Holiday

Reputation: 891

How can I use Components in a VueJS2 CDN project?

I am pretty much stuck on it and I'm not even sure if what I was trying is possible. Here's my project if needed: https://drive.google.com/open?id=1lty3rzUs1h7Rtw5tsN92WeaTBJw2fqVy

Updated: I'm not sure how to display it any better as this is the best it gets.. Basically im passing NestedComponent into Component which is getting passed into app.js which is rendering it into the index.html. That's it, for some reason doesn't work.

// "main.js" the Vue file that renders to the index.html
new Vue({
  el: '#app',
  components: { Component},
  template: '<Component/>'
})

import Component from 'Component'

// "Component.vue" that is getting passed into the above "app.js"
<template lang="html">
  <div>
    <p>{{ title }}</p>
    <h1>Hi!</h1>
    <NestedComponent/>
  </div>
</template>

<script>
import NestedComponent from 'NestedComponent'

export default {
  name: 'Component',
  components: {
     NestedComponent
  },
  data: {
    title: 'Hello'
  }
}
</script>

// "NestedComponent.vue" a nested component that is getting passed onto it's parent Component "Component.vue"
<template lang="html">
  <div>
    <p>{{ im a nested component }}</p>
  </div>
</template>

<script>
export default {
  name: 'NestedComponent',
  components: {

  },
  data: {

  }
}
</script>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{title}}</div>

    <script type="text/javascript" src="/script.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Upvotes: 2

Views: 7686

Answers (1)

aks
aks

Reputation: 9491

There are a few things that I think is causing the problem:

  1. You are using .vue files. They require special loaders via Webpack or similar tool. They will then be converted into a normal .js file. In your case, you have a CDN version of Vue so these features will not be available to you.
  2. As people have mentioned before the use of import and export is not supported by the browser natively. This again needs to run through the Webpack or similar tool.

Find similar information in the docs https://v2.vuejs.org/v2/guide/single-file-components.html

Upvotes: 4

Related Questions