teleport per spostare il dialog in una posizione consona nel DOM

Cristiano Magro

2025-01-07 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795

 10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue

@@ -1,51 +1,37 @@
<template>
    <ul>
        <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description"
            :link="res.link">
        </learning-resource>
    </ul>
  <TheHeader :title="rememberMe"></TheHeader>
  <TheResources></TheResources>
</template>

<script>
import LearningResource from './components/learning-resource/LearningResource.vue';
import TheHeader from './components/layouts/TheHeader.vue';
import TheResources from './components/learning-resource/TheResources.vue';

export default {
    components: {
        LearningResource: LearningResource,
    },
    data() {
        return {
            storedResouces: [
                {
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to google...',
                    link: 'https://google.com'
                },
            ]
        }
    }
}
  components: {
    TheHeader: TheHeader,
    TheResources: TheResources,
  },
  data() {
    return {
      rememberMe: 'Remember Me',
    };
  },
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
  box-sizing: border-box;
}

html {
    font-family: 'Roboto', sans-serif;
  font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
  margin: 0;
}
</style>
</style>