struggling to utilize vue.js 2 components

Question

struggling to utilize vue.js 2 components

I just started learning vue.js from the book titled "Getting to know Vue". However, I am facing some challenges with the components page. The sample code provided in the book is not working for me and every time I try to open the HTML file, it just shows a blank page.

Despite searching on Google, Yahoo, and even on the official Vue documentation, none of the examples seem to work for me. It's strange that I am unable to execute this code properly. Any assistance in getting this code to work would be greatly appreciated.

Below is the code snippet:
The version of vue.js being used is 2.7.14

<!doctype html>
<html>
    <head></head>    
    <body>    
      <script src="vue.js"></script>
      <script>
        Vue.component('our-header', {
          template: `<h1>App Header</h1>`
        });
      </script>    
      <div id='our-header'>
        <our-header></our-header>
      </div>
    </body>
</html>

javascript vue.js

Answer 1

Answer №1

When your Vue instance is in the "unmounted" state, it means there is no associated DOM element. You can use vm.$mount() to manually initiate the mounting process for an unmounted Vue instance.

<!doctype html>
<html>
    <head></head>    
    <body>    
      <div id='app'>  
      </div>
      <script src="vue.js"></script>
      <script>
        const OurHeader = Vue.component('our-header', {
          template: `<h1>App Header</h1>`
        });
        var app = new Vue({
          render: (h) => h(OurHeader),
        }).$mount('#app')
        
      </script> 
    </body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.js"></script>
<!doctype html>
<html>
    <head></head>    
    <body>    
      <div id='app'>  
      </div>
      <script>
        const OurHeader = Vue.component('our-header', {
          template: `<h1>App Header</h1>`
        });
        var app = new Vue({
          render: (h) => h(OurHeader),
        }).$mount('#app')
      </script> 
    </body>
</html>

Answer 2

When your Vue instance is in the "unmounted" state, it means there is no associated DOM element. You can use vm.$mount() to manually initiate the mounting process for an unmounted Vue instance.

<!doctype html>
<html>
    <head></head>    
    <body>    
      <div id='app'>  
      </div>
      <script src="vue.js"></script>
      <script>
        const OurHeader = Vue.component('our-header', {
          template: `<h1>App Header</h1>`
        });
        var app = new Vue({
          render: (h) => h(OurHeader),
        }).$mount('#app')
        
      </script> 
    </body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.js"></script>
<!doctype html>
<html>
    <head></head>    
    <body>    
      <div id='app'>  
      </div>
      <script>
        const OurHeader = Vue.component('our-header', {
          template: `<h1>App Header</h1>`
        });
        var app = new Vue({
          render: (h) => h(OurHeader),
        }).$mount('#app')
      </script> 
    </body>
</html>

Answer 3

Answer №2

Consider making a change

<script src="vue.js"></script>

Try updating it to

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

To test if it will work. It seems like there might have been an issue with importing VueJS properly.

Answer 4

Consider making a change

<script src="vue.js"></script>

Try updating it to

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

To test if it will work. It seems like there might have been an issue with importing VueJS properly.

struggling to utilize vue.js 2 components

Answer №1

Answer №2

Similar questions

Passing data between Vue components

Managing query inputs in React and Express applications

Retrieving data from MongoDB and presenting it neatly in Bootstrap cards

Preventing conflicts while toggling visibility with JQuery across various groups

Issue encountered while selecting the Electron app menu item

Leveraging the NextAuth hooks, employ the useSession() function within the getServerSideProps

What are some methods to make sure that functions in AngularJS do not run at the same time

Dynamically showcasing content in an HTML table

Adjust the text according to the selected checkbox option

Executing php class method through ajax with jQuery without requiring a php handler file

Create a unique custom spinning loader for a straightforward Vue.js application

Having trouble running my Vue project due to an issue in the app.scss file

Dropped down list failing to display JSON data

Unknown Parameters Issue with Vue.js Router Links

No input values were passed to express-validator

Divide the promised variable into separate named variables

JQuery is capable of hiding a div using the .hide() method but is unable to reveal it using the

React Ant Design: Toggle Visibility of Columns

Combining the powers of Socket.io, node.js, and smart routing

Can you provide an explanation of what the 'attribution' key does in the tomTomMap.addSource() function?