title: defining global variables with vite development
body: <p>Now I am using <strong>vite build tool</strong> for my <strong>vue SFC app</strong>. I read the documentation of vite with the link below:</p>
  <p><a href="https://vitejs.dev/config/#define" rel="nofollow noreferrer">vite config link</a></p>
  <p>If I am not wrong, the <strong>define</strong> option in config could be used for defining <strong>global constants</strong>. What I want to do is to define for example the name of my App in a variable inside this option and then use it in my Vue components. But unfortunately there is no example of code in the documentation about this option.</p>
  <p>I tried this code in my <strong>vite.config.js</strong> file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    define: {
        global: {
          appName: "my-custom-name"
        }
    },
    plugins: [vue()]
  })</code></pre>
  </div>
  </div>
  </p>
  <p>I am not sure that the syntax and code is <em>correct</em>! And also if it is correct I don't know how to call (use) this constant in my vue app components (<em>.vue files</em>). For example I want to use it in <strong>template</strong> or <strong>script</strong> part of this component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="bgNow"&gt;
  
      &lt;p class="color1"&gt;
  {{ use here }}
      &lt;/p&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
          data() {
              return {
                name: use here
              };
          },
          
          methods: {
              nameMethod() {
                  
                  
                  console.log(use here);
                  
              }
  
          } // end of method
  
      } // end of export
  &lt;/script&gt;
  
  &lt;style scoped&gt;&lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I declared the places that want with <strong>&quot;use here&quot;</strong> in the code. And also if there is  any other way that I could define some global constants and variables in my <strong>vite</strong> vue app, I very much appreciate your help to tell me about that.</p>