Environment variables in Nuxt 3

Amit Gurbani — Thu, 18 Aug 2022 12:40:51 +0000

To use environment variables in Nuxt 3, we need to use

runtimeConfig in nuxt.config.

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: "123",
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: process.env.API_BASE || "default_api_url",
      otherUrl: process.env.OTHER_URL || "default_other_url"
    }
  }
});

So now if environment variables are present, their values will be stored in apiBase and otherUrl. If environment variables are not present, default values will be used for apiBase and otherUrl.

To access this within components/plugins/server routes use useRuntimeConfig().

<template>
  <div>
    API Base - {{ runtimeConfig.public.apiBase }} <br />
    Other URL -
    {{ runtimeConfig.public.otherUrl }} <br />
  </div>
</template>
<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig();
</script>

Here is the codesandbox to see it in action,

Official Documentation

Creating a Modal in Ionic Vue

Amit Gurbani — Sun, 27 Dec 2020 17:46:29 +0000

Create a component you want to render inside the ionic modal.

@/components/modal.vue

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    This is a modal
  </ion-content>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Modal",
  components: { IonContent, IonHeader, IonTitle, IonToolbar },
});
</script>

Create a modal instance and method to open the modal

@/views/Home.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Ionic Vue Modal Example</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  modalController,
} from "@ionic/vue";
import { defineComponent } from "vue";

import Modal from "@/components/modal.vue";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
  },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: Modal, //Modal is name of the component to render inside ionic modal
      });
      return modal.present();
    };

    return { openModal };
  },
});
</script>

Import modalController from @ionic/vue.
Import component Modal from @/components/modal.vue.
Create method openModal to present the modal when "Open Modal" button is clicked.

Create method to close the modal