VueにURL先のページを埋め込み

URLを指定してサイト内にページを埋め込む手順

url_view.vue

<template>
  <div>
    <input type="text" v-model="moji" class="border px-2 py-1 rounded" />
    <button
      @click="selected_btn"
      class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-xl transition"
    >
      変更
    </button>

    <div class="w-full max-w-4xl h-[600px] border rounded-xl overflow-hidden shadow mt-4">
      <iframe
        :src="selectedUrl"
        class="w-full h-full"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore.js'

const userStore = useUserStore()
const { selectedUrl } = storeToRefs(userStore)

const moji = ref('')

const selected_btn = () => {
  console.log(moji.value);
  selectedUrl.value = moji.value
}
</script>

Piniaの設定

src\stores\userStore.js

import { defineStore, setActivePinia } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    user: null,
    selectedUrl: 'https://XXXXXXXX.com',//初期値のURL
  }),

  actions: {
     setUrl(url) {
      this.selectedUrl = url
    },

  },

  persist: {
    enabled: true,
    strategies: [
      { key: 'user-data', storage: localStorage, paths: ['user'] },
    ],
  },
});