Scripts loaded depending on "device"

[oritwoen]

🆒 Your use case

Depending on the type of device or browser agent, some scripts are not needed and only affect the results, e.g. in pagespeed negatively.

In the example below, I created a code that loads analytical scripts only if the user agent is not a crawler. I used the @nuxtjs/device module for this

const { isCrawler } = useDevice()

if (!isCrawler) {
	useScriptXPixel({ id: 'xx' })
	useScriptClarity({ id: 'xx' })
	useScriptMetaPixel({ id: 'xx' })
	useScriptGoogleAnalytics({ id: 'G-xx' })
	useScriptCloudflareWebAnalytics({ token: 'xx' })

	useScript('https://cdn.xx.net/storage/xx/client.js', {
		bundle: true,
	})
}

🆕 The solution you'd like

It would be nice to have a direct option to load scripts depending on the device based on:

useScript('https://scripts.com/script.js', {
	device: 'desktop|mobile'
})

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[harlan-zw]

Hi, thanks for the issue.

Nuxt Scripts is made for this type of scenario. In this instance, your best bet would be to set a manual trigger for composables that you don't want to load.

useScriptXPixel({ 
     id: 'xx', 
     scriptOptions: isCrawler ? 'manual' : 'onNuxtReady'
})

Alternatively you can have it as manual and call the load function manually.

const { $script } = useScriptXPixel({ 
     id: 'xx', 
     scriptOptions: 'manual'
})

if (!isCrawler) {
  $script.load()
}

[oritwoen]

Thanks for the answer @harlan-zw. Indeed the solutions you show and the scenario are the most simple and effective.

Thanks again for showing an effective example and possibilities.