Laravel - Public directory outside project folder - Vue not working

Question

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

Shizzen83 · Accepted Answer · 2020-04-16 15:07:47Z

1

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>

answered Apr 16, 2020 at 15:07

Shizzen83

3,5593 gold badges14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sharkyenergy Over a year ago

thank you for your answer.. I am not sure I totally understood. what does the first block of code do? Should i add it in the webpack or is it a replace for the eistisng one? the last sample is the sourcecode i see in the browser. I followed this tutorial: youtu.be/ImtZ5yENzgE?t=12137

Shizzen83 Over a year ago

The first block of code is a Webpack config you can inject from Laravel Mix, you can simply copy-paste it into your webpack.mix.js file before assets compiling. The last sample cannot work as I said because your browser does not understand this kind of JavaScript.

sharkyenergy Over a year ago

thanks, the import problem is fixed.. but now I still have the error

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

Shizzen83 Over a year ago

Please edit your post and show the whole component where <set-fav> is used in the template

Shizzen83 Over a year ago

About your <set-fav> issue, it will be much harder to fix because when you build your assets with Laravel Mix, the usual way is to add a <div id="app"></div> to your Blade file, and include your build JS which creates a Vue instance rooted onto this div. Tell me whether you want to try this, but it would cost big changes.

Collectives™ on Stack Overflow

Laravel - Public directory outside project folder - Vue not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related