Laravel-vue

Published 5 days ago by deepu07

Hello Folks, I'm trying to build a blog with Laravel-vue. But I'm unable to load vue.js. It is getting an error. I couldn't find why it is not loading can anyone help me?

Thanks in advance

    <div id="app" class="container">
        @include ('projects.list')      

        <form method="POST" action="/projects" @submit.prevent="onSubmit">
        @csrf
            <div class="control">
                <label for="name" class="label">Project Name:</label>
                <input type="text" id="name" name="name" class="input"> 
            </div>

            <div class="control">
                <label for="description" class="label">Project Description:</label>
                <input type="text" id="description" name="description" class="input">
            </div>
    <br>
            <div class="control">
                <button class="button is-primary">Create</button>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="../resources/assets/js/app.js"></script>
</body>
</html>```


#app.js
```const app = new Vue({
    el: '#app',

    data: {

    },

    methods: {
        onSubmit() {
           axios.post('/projects', this.$data);
        }
    },
});

#ERROR

In console im getting GET http://localhost:8888/larapower/public/resources/assets/js/app.js 404 (Not Found)

Best Answer (As Selected By deepu07)
Cronix
<script src="../resources/assets/js/app.js"></script>

You can't load assets from resources. It's not publicly accessible. It needs to be in /public, like /public/js/app.js, and then load it like

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

And the /public dir should be your sites DocumentRoot.

Cronix
Cronix
5 days ago (727,800 XP)
<script src="../resources/assets/js/app.js"></script>

You can't load assets from resources. It's not publicly accessible. It needs to be in /public, like /public/js/app.js, and then load it like

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

And the /public dir should be your sites DocumentRoot.

deepu07
deepu07
5 days ago (15,350 XP)

yup that resolved my problem it is throwing 404 error (xhr.js:179 POST http://localhost:8888/projects 404 (Not Found)) .

This is my form <form method="POST" action="/projects" @submit.prevent="onSubmit">

and #web.php Route::get('projects/create', '[email protected]'); Route::post('projects', '[email protected]')->name('projects');

looks like it not recognizing the route. How can I resolve that? can you help me on this..

Cronix
Cronix
5 days ago (727,800 XP)

I think it's the way you have your site set up. As I mentioned, /public should be the DocumentRoot of your site. Your urls shouldn't have to have "public" in them anywhere to work.

For instance, if you changed your form to submit to

<form method="POST" action="/larapower/public/projects" @submit.prevent="onSubmit">

does it work? I assume it will, but you obviously don't want /larapower/public in there because when you put this on the net, you'll have to redo all of your urls. It's best to set the site up properly to begin with, then /projects will work no matter where it's hosted.

deepu07
deepu07
5 days ago (15,350 XP)

Looks like I need to setup a virtual host for site. Am i right?

Cronix
Cronix
5 days ago (727,800 XP)

It has nothing to do with laravel or it's files. It has to do with your mamp setup. I don't use it so can't help you with that part. Maybe this will help: https://medium.com/@wilbo/adding-a-virtual-host-in-mamp-for-mac-a6c717cc0475

This is a different subject than your original question, which was solved. Please mark the thread as solved and start a new topic with this if you can't get it to work.

Please sign in or create an account to participate in this conversation.