| 1 | <script setup lang="ts"> |
| 2 | defineProps<{ type: 'node' | 'client' | 'both' }>() |
| 3 | </script> |
| 4 | |
| 5 | <template> |
| 6 | <details class="p4 mt-4 rounded-lg bg-gray-400 bg-opacity-10"> |
| 7 | <summary class="outline-none !m0 select-none"> |
| 8 | Environment: |
| 9 | <span class="capitalize font-bold" :class="type === 'node' ? 'text-orange-400' : 'text-green-400'">{{ type }}</span> |
| 10 | </summary> |
| 11 | |
| 12 | <div class="pt2 opacity-75"> |
| 13 | <span v-if="type === 'both'"> |
| 14 | This setup function will run on <b>both</b> Node.js and client side. Avoid using Node.js or DOM API to prevent runtime errors. |
| 15 | </span> |
| 16 | <span v-else-if="type === 'node'"> |
| 17 | This setup function will only run on Node.js environment, you can have access to Node's API. |
| 18 | </span> |
| 19 | <span v-else-if="type === 'client'"> |
| 20 | This setup function will only run on client side. Make sure the browser compatibility when importing packages. |
| 21 | </span> |
| 22 | </div> |
| 23 | </details> |
| 24 | </template> |
| 25 |