3
votes

Ajoutez facilement des balises de script à nuxtjs

Fondamentalement, je dois ajouter le script à la tête de mon index.html,

head: {
    script: [
        {  
           type: 'text/javascript', 
           src: 'https://a.optmnstr.com/app/js/api.min.js',
           data-account: 'XXXXX',
           data-user: 'XXXXX',
           async: true
        }
    ]
}

donc ce que j'ai essayé est ...

dans mon nuxt .config.js

<script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXXX" data-user="XXXXX" async></script>

maintenant, évidemment, cela ne fonctionne pas car data-account et data-user ne le sont pas valide, alors comment puis-je faire en sorte que cela fonctionne?

Toute aide serait appréciée!

Merci

vue.js nuxt.js vuejs2

1 commentaires

Vous pouvez essayer de regarder ceci ou this .

3 Réponses :

8
votes

Cela a été signalé par @ Andrew1325

Dans nuxt.js, vous pouvez créer un fichier app.html et y ajouter des scripts, donc dans mon cas, le app.html ressemble à ceci

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
  <script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXX" data-user="XXXX" async></script>
</html>

IMO c'est un moyen très simple d'inclure des scripts difficiles dans votre projet

REMARQUE strong >

Vous devrez redémarrer votre projet pour voir les modifications app.html

Pour plus d'informations, vous pouvez aller nuxtjs - modèle d'application

1 commentaires

Comment ajouter js qui se trouve dans le dossier des actifs plutôt qu'en externe

2
votes

Vous pouvez également simplement mettre les attributs de données entre guillemets simples comme ceci:

head: {
    script: [
        {  
            type: 'text/javascript', 
            src: 'https://a.optmnstr.com/app/js/api.min.js',
            'data-account': 'XXXXX',
            'data-user': 'XXXXX',
            async: true
        }
    ]
}

0 commentaires

0
votes

Cela pourrait vous aider

export default {
  data () {
    return {
      message: '',
      head: {
        type: Object,
        default: function () {
          return {
            title: ' Default Home page  ',
            meta: [
              {
                'hid': 'description',
                'name': ' description',
                'content': ' Home page  content '
              }
            ],
            script: [
              {
                innerHTML: {
                  'url': 'https://www.example.com',
                  'logo': 'https://www.example.com/icon/logo.png',
                  'parentOrganization': {
                    'name': 'The X Company Inc',
                    'url': 'https://example.io',
                    'logo': 'https://example.io/logo-est.png',
                    '@type': 'Organization'
                  },
                  'foundingLocation': {
                    'address': {
                      'addressLocality': 'Dakar',
                      'addressRegion': 'Selegal',
                      '@type': 'PostalAddress'
                    },
                    '@type': 'Place'
                  },
                  'sameAs': ['https://www.facebook.com/example', 'https://www.twitter.com/example'],
                  '@context': 'http://schema.org',
                  '@type': 'Organization'
                },
                type: 'application/ld+json'
              }
            ]
          }
        }
      }
    }
  }
}
</script>

0 commentaires