CODEWITHSUNDEEP
laravelvue.js
Dominic
Dominic

Reputation: 510

.Vue-File: Migrate structure from "template:'' to <template></template>

I try to change the structure of my .vue files (used with laravel) from the working version as seen here:

OLD foo-component.vue:

<script>
    Vue.component("foo-component", {
      data() {
      },

      props: {
      },

      methods: {
        },
      template: `
            <div> Some Content Here </div>
            `
    });
</script>

switch this to the other structure for .vue files:

NEW: foo-component.vue:

<template>
        <div> Some Content Here </div>
    </template>

    <script>
        export default {
          name: 'foo-component',
          data() {
          },

          props: {
          },

          methods: {

          },
        }
    </script>

OLD: main app.js:

Vue.component('foo-component', require('./components/foo-component.vue').default);

    const app = new Vue({
        el: '#app',
        components: {
            OtherComponents
                },
        data:{
        },
        methods: {
        }
    });

NEW: main app.js:

Vue.component('foo-component', require('./components/foo-component.vue').default);

    const app = new Vue({
        el: '#app',
        components: {
            OtherComponents
                },
        data:{
        },
        methods: {
        }
    });

But with that I get an error in the browser saying:

[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I then added 'foo-component' to the components: {OtherComponents, foo-component} but then things got messy and the browser is saying: 

Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)

What am I doing wrong?

Here's the HTML/View where I call the foo-component inside the laravel blade home.blade.php:

<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

<body>
    <div id="app">
            <foo-component></foo-component>
    </div>
    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Upvotes: 0

Views: 45

Answers (2)

Dominic
Dominic

Reputation: 510

The way I got it working is an update to app.js:

Vue.component('foo-component', require('./components/foo-component.vue').default);

import FooComponent from './components/foo-component.vue';

const app = new Vue({
    el: '#app',
    components: {
        OtherComponents,
        'foo-component': FooComponent
            },
    data:{
    },
    methods: {
    }
});

Upvotes: 0

Dino Numić
Dino Numić

Reputation: 1452

You have to register your components in app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Upvotes: 0

Related Questions