I'm trying to display Tableau workbooks on my webpage, but the result is blank page

Question

My web is Laravel-VueJs App, I managed to sign in to Tableau server automatically in the background, (but without getting Auth tickets (I'm not sure if I need tickets for Javascript API yet), I'm trying to show my workbooks on my web page but getting blank page without any error, however this is my code

first added Javascript API in my app.blade.php

<script type="text/javascript" src="https://my-server-url/javascripts/api/tableau-2.8.0.min.js"></script>

and this is the Vue component where I need to show workbooks

<template>
  <div>
    <div
      ref="tableau"
      style="width:800px; height:700px;"
    />
  </div>
</template>
<script>

export default {
  name: "TableauWorkbookShow",
  props: {
    url: {
      type: String, 
      required: true,
    },
  },
  mounted(){
      this.initViz();

  },
  methods: {
    initViz() {
// url looks something like this: https://my-server-url/#/site/my-site-name/views/workbook-name/view-name
    var viz = new tableau.Viz(this.$refs.tableau, this.url);
    }
  }
};
</script>

no errors, neither info on the page, anything else i need to consider here ? and should I add Auth tickets to the url to get workbooks or the url as it is now is fine to work?

Answer 1

One way to test would be to use the Embed code directly from the workbook on Server.

Click Share

Then click Copy Embed Code.

Paste this code directly into your html/view. It should have everything included to populate your dashboard into a webpage.

If this works, you know that your overall auth is working and you can troubleshoot the differences of your js to the embed code.

If auth doesn't work you should still see this screen if your js/html is working correctly.