Vue Facebook Page Plugin

This plugin is also compatible with NUXT

Installation

npm install vue-facebook-page

Adding it to Vue in main.js

import Vue from 'vue'
import VueFacebookPage from 'vue-facebook-page'
import App from './App.vue'

// The plugin is loaded here.
// You have to pass your FB app Id as a second parameter

Vue.use(VueFacebookPage, /** Add your facebook appId here */)

new Vue({
  el: '#app',
  render: h => h(App)
});

Then simply use it in your app like this (Suggested to use in App.vue if you want it on every page)

<template>
  <div>
    <h1>Your template code</h1>
    <!-- Simply add the component (NB! Add your page link as prop data-href="String" and your preferred link title as link-text="String") -->
    <vue-facebook-page data-href="https://facebook.com/yourpage/" link-text="Your Page Name" />
    <router-view/>
  </div>
</template>

<script>
export default {
  // Your properties here
}
</script>

Steps for NUXT

After installing the plugin via npm, create a file named VueFacebookPage.js in the plugins directory in your project root and add this:

import Vue from 'vue'
import VueFacebookPage from 'vue-faceboook-page'

Vue.use(VueFacebookPage, /** Add your facebook appId here */)

Then in your nuxt.config.js file add a plugins property like this:

 plugins: [
    { src: '~/plugins/VueFacebookPage.js', ssr: false},
  ]

This will allow the component to be globally available. It is suggested to add it to your default layout to add to every page

<template>
  <div>
    <h1>Your template code</h1>
    <!-- Simply add the component (NB! Add your page link as prop data-href="String" and your preferred link title as link-title="String") -->
    <vue-facebook-page data-href="https://facebook.com/yourpage/" link-text="Your Page Name" />
    <nuxt />
  </div>
</template>

<script>
export default {
  // Your properties here
}
</script>

NB if you are using spa mode of nuxt you must wrap your component in no-ssr tags:

<no-ssr>
  <vue-facebook-page data-href="https://facebook.com/yourpage/" link-text="Your Page Name" />
</no-ssr>

Happy Coding!