Hello! I make clear Nuxt.js project and copy/insert your code (from main GitHub repo p

I got it working with Nuxt 2.2.0 with the following: <code class="no

try to use the component as <a href="https://nuxtjs.org/guide/plugins#client-side-only

Thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-u

How to use it on Nuxt.js 0.9.7 project? about vue-instagram HOT 3 CLOSED

koddr commented on July 20, 2024

How to use it on Nuxt.js 0.9.7 project?

from vue-instagram.

Comments (3)

danchristian commented on July 20, 2024 3

I got it working with Nuxt 2.2.0 with the following:

/plugins/vue-instagram.js

import Vue from 'vue'
import VueInstagram from 'vue-instagram'

Vue.use(VueInstagram)

/nuxt.config.js

plugins: [
  { src: '~/plugins/vue-instagram', ssr: false }
]

Then you can use it like so. You don't need to import the plugin in your Vue component as it's already defined in the Vue instance.

<template>
  <vue-instagram token="accessTokenHere" :count="5" :tags="['hashtag1', 'hashtag2']" mediaType="image">
    <template slot="feeds" slot-scope="props">
      <li class="fancy-list"> {{ props.feed.link }} </li>
    </template>
    <template slot="error" slot-scope="props">
      <div class="fancy-alert"> {{ props.error.error_message }} </div>
    </template>
  </vue-instagram>
</template>

<script>
</script>

from vue-instagram.

kevinongko commented on July 20, 2024

try to use the component as client-side only

<script>
let VueInstagram

if (process.BROWSER_BUILD) {
  VueInstagram = require('vue-instagram')
}

export default {
  name: 'App',

  components: {
    VueInstagram
  }
}
</script>