CODEWITHSUNDEEP
phplaravelvue.jslaravel-blade
oliverbj
oliverbj

Reputation: 6062

Vue - Interpolation inside attributes/using the shorthand

I am having an issue with compiling a .Vue file. I am running a SPA using Vue.js and Laravel.

I am currently trying to add below, to my Home.vue:

<ais-index app-id="{{ config('scout.algolia.id') }}" api-key="{{ env('ALGOLIA_SEARCH') }}" index-name="contacts">

    <ais-input placeholder="Search contacts..."></ais-input>
    <ais-results></ais-results>

 </ais-index>

However, that gives me this error:

- app-id="{{ config('scout.algolia.id') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- api-key="{{ env('ALGOLIA_SEARCH') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

I have even tried adding the : before the attributes like this, as the error suggests:

<ais-input placeholder="Search contacts..."></ais-input>
<ais-results></ais-results>

But that gives me this error:

  - invalid expression: Unexpected token { in

    {{ config('scout.algolia.id') }}

  Raw expression: :app-id="{{ config('scout.algolia.id') }}"

  - invalid expression: Unexpected token { in

    {{ env('ALGOLIA_SEARCH') }}

  Raw expression: :api-key="{{ env('ALGOLIA_SEARCH') }}"

Upvotes: 0

Views: 1194

Answers (1)

oliverbj
oliverbj

Reputation: 6062

OK I finally figured it out.

According to Laravel's docs, we may inject environment variables into Mix by prefixing a key in your .env file with MIX_

I then define these env variables in my .env like this:

ALGOLIA_APP_ID=XXXXX
ALGOLIA_SECRET=YYYYY
MIX_ALGOLIA_APP_ID=XXXXX
MIX_ALGOLIA_SECRET=YYYYY

So, in my Home.vue file I have this:

<script>
    export default {
        data() {
            return {
                query: '',
                angoliaAppId: process.env.MIX_ALGOLIA_APP_ID,
                angoliaAppKey: process.env.MIX_ALGOLIA_SECRET,

            };
        }
    };
</script>

And I can now access them like this:

:app-id="angoliaAppId" :api-key="angoliaAppKey"

Bonus info:

I did read the Laravel docs before asking this question here, and I also added the MIX. variables to my .env file.

However, you need to re-compile npm. Using npm watch does not catch these changes. So you must use:

npm run dev or npm run production

Upvotes: 1

Related Questions