How to use Env Variables in a Vue app's index.html file?

Question

I have an index file:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title For This Document -->
    <title> Html Template</title>
    <!-- Favicon For This Document -->
    <link rel="shortcut icon" href="src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
    <!-- Bootstrap 5 Css -->
    <link rel="stylesheet" href="src/assets/css/bootstrap.5.1.1.min.css">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- FlatIcon Css -->
    <link rel="stylesheet" href="src/assets/fonts/flaticon.css">

    <!-- Slick Slider Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/slick.css">
    <!--  Ui Tabs Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/jquery-ui.min.css">
    <!-- Magnific-popup Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/magnific-popup.css">
    <!-- Nice Select Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/nice-select.v1.0.css">
    <!-- Animate Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/animate.css">
    <!-- Style Css -->
    <link rel="stylesheet" href="src/assets/css/style.css">

</head>

<body>
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->

<script src="src/assets/js/jquery.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="src/assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="src/assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="src/assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="src/assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="src/assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="src/assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="src/assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="src/assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="src/assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="/src/main.js"></script>
</body>

</html>

I have a Vue app:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'


const app = createApp(App)

app.use(router)
app.config.globalProperties.axios = axios
app.mount('#app')

And I'm using vite, not CLI.

I want to use my env variables in the index file(not in js script tags) from the .env file How to implement it? I read the vue documentation, but it it doesn't have any examples how to use it in html code. I tried "import.meta.env" here:

<div id="app">{{import.meta.env.DOMAIN_NAME}}</div>

I tried to use it here:

<meta name="DOMAIN_NAME" value={import.meta.env.DOMAIN_NAME}>

, but it didn't work like this... I think it is not correct syntax at least...

Does this answer your question? Vue js project not loading .env variables — Joel
– Joel, Commented Oct 11, 2022 at 12:06

Rupert Angermeier · Accepted Answer · 2023-03-20 13:32:43Z

4

Replacing environment variables has been added in Vite 4.2.0, see https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

Add this to your .env/.env.dev/... file:

VITE_DOMAIN_NAME = https://your-domain

Or the following to your vite.conf.js

process.env.VITE_DOMAIN_NAME = 'https://your-domain'

Then you can replace it in your index.html like this:

<div id="app">%VITE_DOMAIN_NAME%</div>

You have to prefix your environment variables with VITE_ so they become exposed in your code.

answered Mar 20, 2023 at 13:32

Rupert Angermeier

1,1959 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taha Azzabi · Accepted Answer · 2022-10-11 12:30:32Z

1

I think what you are looking for: is how to modify the metaData (the tags of the Head part), I suggest you use the vue-meta plugin which will allow you the META DOMAIN_NAME tag, then in your main.js you can define :

Vue.use(VueMeta, {
  DOMAIN_NAME: VUE_APP_DOMAIN_NAME
})

Everything is well explained here : https://www.digitalocean.com/community/tutorials/vuejs-vue-meta

Otherwise I think there is a syntax error in your code, the correct syntax is

<meta name="DOMAIN_NAME" value="<%= import.meta.env.DOMAIN_NAME %>">

Please this index.html file generated by Vuejs

edited Oct 11, 2022 at 12:30

answered Oct 11, 2022 at 12:15

Taha Azzabi

2,5881 gold badge23 silver badges33 bronze badges

3 Comments

Evg127 Over a year ago

Not really. Probably it can solve my problem right now for this specific task, but globally I would like to learn how to use ANY env variables in html code/ Not only meta data. Anyway thanks for your help!

Taha Azzabi Over a year ago

try this syntaxe then <%= import.meta.env.DOMAIN_NAME %> <meta name="DOMAIN_NAME" value="<%= import.meta.env.DOMAIN_NAME %>">

Evg127 Over a year ago

``` <div><%= import.meta.env.DOMAIN_NAME %></div> ``` gives the following vue error: Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name and it points to the % symbol

Abhishek Raj · Accepted Answer · 2023-05-14 07:12:27Z

0

I have not found any solution without any plugin.

So finally, I used vite-plugin-html-env npm package to fix this issue.

Link of the npm package: vite-plugin-html-env

answered May 14, 2023 at 7:12

Abhishek Raj

4904 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use Env Variables in a Vue app's index.html file?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related