2

I'm using a Vue.js project setup with Nuxt and Vuetify.js.

I'm trying to add FontAwesome icons as v-btns to lead the user to an Instagram page.

Unfortunately when clicking the icon, the browser is directed to http://localhost:3000/https://www.instagram.com/therock/?hl=en instead of just https://www.instagram.com/therock/?hl=en as expected. The Instagram account URL is tacked onto the end of the base URL.

Here's the template portion of the Vue file:

<template>
  <v-app>
    <v-toolbar app flat color="rgb(249, 249, 249)">
      <router-link to="/" class="toolbar-title">
        <v-toolbar-title>Chumiest Bucket</v-toolbar-title>
      </router-link>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn
          v-for="(item, index) in items"
          :key="index"
          :to="item.path"
          flat
        >{{ item.name }}</v-btn>
        <v-btn flat :to="instagram.path">
          <font-awesome-icon :icon="instagram.icon"/>
        </v-btn>
      </v-toolbar-items>

      <v-menu class="hidden-md-and-up">
        <v-toolbar-side-icon slot="activator"></v-toolbar-side-icon>
        <v-list>
          <v-list-item v-for="(item, index) in items" :key="index">
            <v-btn :to="item.path" flat>{{ item.name }}</v-btn>
          </v-list-item>
          <v-btn flat :to="instagram.path">
            <font-awesome-icon :icon="instagram.icon"/>
          </v-btn>
        </v-list>
      </v-menu>

    </v-toolbar>

    <v-content style="padding-top: 19px;">
      <v-container>
        <nuxt />
      </v-container>
    </v-content>

    <v-footer app style="position: absolute;">
      <span style="font-size: 8pt;">&copy; 2019 Chumiest Bucket</span>
    </v-footer>
  </v-app>
</template>

here's the script portion of the Vue file:

<script>
export default {
  name: 'app',
  data() {
    return {
      fixed: false,
      items: [
        {
          name: 'About',
          path: '/about'
        },
        {
          name: 'Stuff',
          path: '/stuff'
        }
      ],
      instagram: {
        icon: ['fab', 'instagram'],
        path: 'https://www.instagram.com/therock/?hl=en'
      },
    }
  }
}
</script>
ChumiestBucket
  • 868
  • 4
  • 22
  • 51

1 Answers1

4

The "to" prop is used for navigating to pages within your routes. See documentation here. To navigate to external links, Bind the url to href instead.

<a :href="instagram.path">
  {{ url }}
</a>
Cathy Ha
  • 1,637
  • 7
  • 17
  • Old but related: I have the same behavior with adding a url to an ``. There the base-url also gets prefixed. How can I undo that? – Robert Wildling Nov 22 '21 at 13:52