CODEWITHSUNDEEP
laravelvue.jspath
sharkyenergy
sharkyenergy

Reputation: 4173

Laravel - Public directory outside project folder - Vue not working

I have searched everywhere, and all answers I found only explain how to rename the public folder. In my case, the public folder is outside the Project folder:

basefolder/
  Laravel/
  public_html/

I have done all changes I found for the renaming folder, and all works except for vue.

In the webpack file i entered this:

mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');

compiled, and it compiled the css and js file in the proper folder. In my app.js i Declared this:

Vue.component('set-fav', require('./components/SetFavorite.vue').default);

and the file components/SetFavorite.vue exists and has its content...

<template>
<div>
    <input type="image" src="/images/favorite.png" border="0" alt="Favorite"  @click="setfavorite" />
</div>
</template>

<script>
export default {
    props: ['photogId','galId','photoname'],
    mounted() {
        console.log('Component mounted.')
    },

    methods: {
        setfavorite(){
            axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
                .then(response => {
                    alert(response.data);
                });
        }
    }
}
</script>

when i Load the page, i do not see the image. Instead in the developer console I see 2 error messages:

 Uncaught SyntaxError: Cannot use import statement outside a module

and 

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

(found in <Root>)

and if I look at the source of my page, it begins like this:

<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
    components: {SetFavorite}
}
</script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
...
...

Now, relative to my index.php file, the path ../../js/components/SetFavorite does not exist.. the correct existing path would be ../Laravel/js/components/SetFavorite

What do I need to do in order to fix this?

Thank you

EDIT, code of view

@extends('layouts.client')

@section('content')
<div class="container">
@if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
    <h1>{{$gallery->galname}}</h1>
</div>
    <div class=" row pt-1 card-deck">
    @foreach($gallery->photos as $photo)

        <div class="col-12 col-md-6 col-sm-12 p-1 " >
                <div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">

                    <div class="w-100 m-0 p-0" style="width: 350px;  height: 350px;">
                        <a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
                            <img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
                        width:100%;
                        height:100%;
                        object-fit: scale-down;">
                        </a>
                    </div>

                    <div class="card-footer w-100  d-flex justify-content-around" style="font-size: smaller;">
                        <div class="d-flex justify-content-around w-100">
                            <div>
                                {{$photo->filename}}
                            </div>
                            <div>
                                <button>Download (Hi-Res)</button>
                            </div>
                            <div>
                                <button>Download (Social Res)</button>
                            </div>
                            <div>
                                <set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    @endforeach
</div>
@else
    <div class="row d-flex justify-content-around pb-3">
        <h1>Nothing here... :)</h1>
    </div>
@endif
</div>

@endsection

Upvotes: 1

Views: 2097

Answers (1)

Shizzen83
Shizzen83

Reputation: 3529

You have 2 issues:

  • You should alias your components directory thanks to Webpack, by the way it will always use an absolute path

In your webpack.mix.js:

mix.webpackConfig({
    resolve: {
        extensions: [ '.js', '.vue' ],
        alias     : { '@': `${ __dirname  }/resources` },
    },
    output: {
        publicPath   : '/',
        chunkFilename: 'js/[name].[chunkhash].js',
    },
});

import SetFavorite from '@/js/components/SetFavorite';
  • If the last sample is the source code of your HTML document, it doesn't work because import and export are unknown to a web browser. You have to do it from an asset, build it with Laravel Mix and include the output to your HTML thanks to
<script type="text/javascript" src="{{ mix(...) }}"></script>

Upvotes: 1

Related Questions