How can use laravel assets in vue component

Question

i using laravel with vue js
i want to show a image element in vue components but i cant use Laravel blades helpers !

<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">

its show me Error

So How Can I Use Assets Helper in vue components?

Extract what you nee from [this](https://stackoverflow.com/questions/41520258/how-to-pass-php-variable-to-vue-component-instance) answer. — Tpojka, Sep 30 '18 at 11:11

score 19 · Answer 1 · answered Jun 05 '20 at 06:53

You can take a different approach, more in line with the way you use asset in the blade templates.

Inside the head section of the layout create a global reference to the base asset path, something like this

<script>
window._asset = '{{ asset('') }}';
</script>

Next step is to create a Vue mixin. In my case, a trans.js file with the following content:

module.exports = {
    methods: {
        asset(path) {
            var base_path = window._asset || '';
            return base_path + path;
        }
    }
}

Make sure you include it after Vue, for example:

window.Vue = require('vue');
Vue.mixin(require('./asset'));

and then you can use it inside all your Vue components. Your original code would look like this

<img :src="asset('admin/images/users/avatar-1.jpg')" width="35 px" height="23px">

Note the lack of {{ and the addition of : in this case, since it is used as an attribute value.

score 7 · Accepted Answer · answered Sep 30 '18 at 10:16

The vue component file has the file ending of .vue, you can't use the blade stuff directly in those files, you need to do following:

Vue component have so called props properties so for example if you create following component:

// TestComponent.vue

<template>
    <div>
        <p :users="users"></p>
    </div>
</template>

<script>
    export default {

        props: ['users'],

        data: () => ({
            // ...
        }),
    }
</script>

You can pass data to the props attributes in this case users, so you can call the component in your blade file and add your users from your server side to the props field like this:

<test-component :users="{{ $users }}"></test-component>

For images you need to adept this and add your image source.

Don't forget to init the component in your app.js file

Vue.component('test-component', require('./components/TestComponent.vue'));

score 5 · Answer 3 · answered Sep 30 '18 at 12:20

5

Blade not running on vue component file(.vue files), If you only use just a image path(<img src=" ">) move to images folder to laravel public directory and then you can directly use the image path

<img src="/images/users/avatar-1.jpg" width="35 px" height="23px">

Otherwise you have to call vue props like this answer

answered Sep 30 '18 at 12:20

Udara Chathuranga

151
5

1

This is the simplest and direct way for me – Ayenew Yihune Apr 21 '22 at 05:25

score 4 · Answer 4 · edited Dec 19 '21 at 20:10

4

Add a forward slash to the beginning of your image path. files should be laravel public folder

<img src="/admin/images/users/avatar-1.jpg">

edited Dec 19 '21 at 20:10

Ismael Padilla

5,246
4
23
35

answered Feb 19 '21 at 12:38

Balaji

9,657
5
47
47

justEugene94 · Answer 5 · 2022-08-02T14:29:12.643

0

You can take url from env file

// .env

MIX_APP_URL="${APP_URL}"

Then in your vue component

data() {
    return {
        appUrl: process.env.MIX_APP_URL
    }
}

edited Aug 02 '22 at 14:29

answered Aug 02 '22 at 14:19

justEugene94

1
1

How can use laravel assets in vue component

5 Answers5

Linked