การใส่ script ใน nuxtjs สามารถใส่ได้ 2 ตำแหน่ง คือ
– Add to nuxt.config.js ( affects to all page )
ตัวอย่าง โจทคือ นำ code google ads ไปติดใน nuxtjs ของเรา โดยให้มีผลกับทุก page


ผลการรัน

– Add to xxx.vue ( only affect that page )
ตัวอย่าง โจทคือ นำ code google ads Tag ไปติดใน หน้า page โปรเจค nuxtJs ของเรา


ผลของการรัน code ตามตัวอย่างจะเป็นแบบนี้


โครงสร้างของ code
script: [
{
โครงสร้างเป็น array[ ..,… ,] ประกอบด้วย Object{…} หลายๆตัว 1 Object คือ 1 tag script <script> </script>
hid: '.............'
hid = id ของ scripts ในหน้าเดียวกันต้องไม่ซ้ำกัน ถ้ามีซ้ำกันจะโดนทับด้วยอันล่าสุด
src: '~/plugins/script-injecter.js'
src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
src ใส่ url หรือ parts ของไฟล์ js กรณีต้องการเรียกเป็นไฟล์
innerHTML: `window.googletag.cmd.push();`,
innerHTML คือ ใส่ Javascripts เข้าไป กรณีเป็นรูปแบบ inline script
async: true/false
defer: true/false
ตั้งค่ารูปแบบการ โหลด scripts ของเรา โดยลำดับการโหลดเป็นดังภาพ

body: true
ปกติถ้าไม่ใส่ body: true scripts นี้จะไปอยู่ ใน <head>….</head> ถ้าใส่ body: true scripts จะไปอยู่ใน ลำดับสุดท้าย ของ <body> …. </body> หรือที่เราเรียกว่า ตำแหน่ง footer
type: 'text/javascript',
charset: 'utf-8',
crossorigin: 'anonymous'
type กับ charset การกำหนดภาษา และการเข้ารหัส ให้กับ scripts ส่วน crossorigin: ‘anonymous’ คือ ทำให้ เว็บไซต์สามารถเข้าถึง code ของ js ข้าม Domain กันได้
Trick
เมื่อใส่ scripts แบบ inline โดยใช้ innerHTML ปกติจะใช้งานไม่ได้ เพราะในโปรเจคที่เขียนด้วย vue js จะมีระบบป้องกันการถูกโจมตีที่ชื่อว่า Sanitizers หน้าที่ของ Sanitizers คือ ไว้สำหรับป้องกัน การใส่สคริปที่ไม่พึงประสงค์เข้ามาใน หน้า page ที่เรียกว่า Cross-Site Scripting หรือ XSS เมื่อมีการ พยายาม ใส่ script เข้ามา ตัว Sanitizers จะ block ไม่ให้สคริปนั้น ทำงาน เพราะอาจจะเป็นสคริปที่ใช้โจมตีระบบ หรือใช้ระบบเรา เป็นตัวกลาง กระจาย ไวรัส เข้าสู่เครื่องของ user ที่เปิดเข้ามายังเว็บของเรา
ในที่นี้ เราจำเป็นต้องเขียน inline Javascript เข้าไป จึงต้อง Disable Sanitizers และหาทางป้องกัน XSS ด้วยวิธีอื่น เราสามารถ Disable ได้ด้วยการใส่ __dangerouslyDisableSanitizers: [‘script’]
__dangerouslyDisableSanitizers: ['script']
include inline Javascript. For that to work however, you need to add the __dangerouslyDisableSanitizers: [‘script’]