Best way to use an environment variable in app.html?

[DerekAlanGilbert]

Before we upgraded > 2.13 we were using process.env.HEAP_ID in a script tag in app.html. That no longer seems to work past nuxt 2.13. Whats the best way to do this going forward?

[DerekAlanGilbert]

As of right now our solution was to use the webpack lodash syntax referenced in the vue cli docs. (even though this isn't a vue cli app I figured we are still using the htmlWebpackPlugin)

So we are doing this and it seems to be working. But, i'd like to upgrade to vite when vue 3 is out and i'm not sure that will be supported. So my question remains in nuxt > 2.13 how do you use env variables in app.html?

<script>
somescript.load('<%= process.env.SCRIPT_KEY %>')
</script>

[kissu]

Do you specifically need to use it in app.html?

[DerekAlanGilbert]

As of right now I think so. This is the script heap provides us. Not sure where else I can put this thing haha 😆. Thanks @kissu for commenting.

	<script type="text/javascript">
			;(window.heap = window.heap || []),
				(heap.load = function(e, t) {
					;(window.heap.appid = e), (window.heap.config = t = t || {})
					var r = document.createElement('script')
					;(r.type = 'text/javascript'), (r.async = !0), (r.src = 'https://cdn.heapanalytics.com/js/heap-' + e + '.js')
					var a = document.getElementsByTagName('script')[0]
					a.parentNode.insertBefore(r, a)
					for (
						var n = function(e) {
								return function() {
									heap.push([e].concat(Array.prototype.slice.call(arguments, 0)))
								}
							},
							p = [
								'addEventProperties',
								'addUserProperties',
								'clearEventProperties',
								'identify',
								'resetIdentity',
								'removeEventProperty',
								'setEventProperties',
								'track',
								'unsetEventProperty'
							],
							o = 0;
						o < p.length;
						o++
					)
						heap[p[o]] = n(p[o])
				})
			heap.load('<%= process.env.HEAP_ID %>')
		</script>

[manniL]

I'd suggest to add this script via a Nuxt plugin. Adding it that way ensures you can inject env variables (and way more) as you like 😋