How to use it on Nuxt.js 0.9.7 project?

[koddr]

Hello! I make clear Nuxt.js project and copy/insert your code (from main GitHub repo page). And get Vue.js error on red screen:

E:\nuxt-project\node_modules\vue-instagram\src\vue-instagram.vue:1
(function (exports, require, module, __filename, __dirname) { <template> ...

SyntaxError: Unexpected token <
...

How to fix it? Maybe you write instructon for Nuxt.js users?

[kevinongko]

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>

[danchristian]

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>

[pit07]

Thanks @danchristian , but i have a No Access Control Allow Origin with this method :( Any ideas? Thanks ;)