Merge branch 'main' into fix/vite-node-ondemand-manifest

nuxt · pi0 · Apr 12, 2022 · Mar 29, 2022 · Mar 30, 2022 · Mar 30, 2022
commit 84049633335bb2ef65c8ef49afad91a041f67f6b
diff --git a/.eslintrc b/.eslintrc
@@ -16,6 +16,7 @@
     "vue/multi-word-component-names": "off",
     "vue/one-component-per-file": "off",
     "vue/require-default-prop": "off",
+    "vue/no-multiple-template-root": "off",
     "jsdoc/require-jsdoc": "off",
     "jsdoc/require-param": "off",
     "jsdoc/require-returns": "off",

diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ Welcome to Nuxt 3 repository ✨
 - Ensure you have the latest LTS version of Node.js installed
 - Install dependencies with `npx yarn install`
 - Run `npx yarn stub` to activate passive development
-- Open playground with `npx yarn play`
+- Open playground with `npx yarn dev`
 
 Learn more about in our documentation on [how to contribute to Nuxt](https://v3.nuxtjs.org/community/contribution).
 

diff --git a/docs/components/app/AppLayout.vue b/docs/components/app/AppLayout.vue
@@ -2,7 +2,7 @@
   <div class="relative w-full">
     <AppHeader :links="headerLinks" />
 
-    <div class="lg:flex" :class="{ 'd-container': layout.aside }">
+    <div class="lg:flex" :class="containerClass">
       <slot v-if="['xs', 'sm', 'md'].includes($mq) || layout.aside" name="aside">
         <AppAside :links="headerLinks" :class="layout.asideClass" />
       </slot>
@@ -33,6 +33,11 @@ export default defineComponent({
   computed: {
     layout () {
       return this.$docus.layout.value
+    },
+    containerClass () {
+      if (this.layout.aside && this.layout.fluid) { return 'd-container-fluid' }
+      if (this.layout.aside) { return 'd-container' }
+      return ''
     }
   }
 })

diff --git a/docs/components/atoms/Sandbox.vue b/docs/components/atoms/Sandbox.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-md sandbox mt-4">
+    <TabsHeader
+      v-if="!src"
+      ref="tabs"
+      :active-tab-index="activeTabIndex"
+      :tabs="providersTabs"
+      @update="updateTab"
+    >
+      <div slot="footer" class="absolute top-1/2 transform -translate-y-1/2 right-0 px-2">
+        <Link class="flex items-center text-gray-500 dark:text-gray-400" :to="sandBoxUrl" blank>
+          <IconExternalLink class="h-5 w-5" />
+        </Link>
+      </div>
+    </TabsHeader>
+
+    <iframe
+      v-if="url"
+      :src="url"
+      title="Sandbox editor"
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      class="w-full h-full min-h-[700px] overflow-hidden bg-gray-100 dark:bg-gray-800"
+    />
+    <span v-else class="text-white flex-1">Loading Sandbox...</span>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  onMounted,
+  computed,
+  ref,
+  useContext
+} from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    src: {
+      type: String
+    },
+    repo: {
+      type: String
+    },
+    branch: {
+      type: String
+    },
+    dir: {
+      type: String
+    },
+    file: {
+      type: String,
+      default: 'app.vue'
+    }
+  },
+  setup (props) {
+    const { $colorMode } = useContext()
+    const providers = {
+      CodeSandBox: () =>
+        `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${$colorMode.value}`,
+      StackBlitz: () =>
+        `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${$colorMode.value}`
+    }
+    const providersTabs = Object.keys(providers).map(p => ({ label: p }))
+    const activeTabIndex = ref(-1)
+    const tabs = ref()
+    const url = ref('')
+    const provider = ref('')
+    function updateTab (i) {
+      activeTabIndex.value = i
+      changeProvider(providersTabs[i].label)
+    }
+    onMounted(() => {
+      // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
+      provider.value =
+        window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
+      url.value = props.src || providers[provider.value]()
+      // Set active tab
+      activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
+      setTimeout(() => tabs.value.updateTabs(activeTabIndex.value), 100)
+    })
+    const changeProvider = (value) => {
+      provider.value = value
+      url.value = props.src || providers[provider.value]()
+      localStorage.setItem('docus_sandbox', value)
+    }
+    const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
+    return {
+      tabs,
+      provider,
+      url,
+      sandBoxUrl,
+      changeProvider,
+      updateTab,
+      activeTabIndex,
+      providersTabs
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.sandbox,
+.sandbox iframe {
+  @apply w-full rounded-md rounded-tl-none rounded-tr-none overflow-hidden h-64;
+  height: 700px;
+}
+</style>
diff --git a/docs/components/templates/Example.vue b/docs/components/templates/Example.vue
@@ -0,0 +1,45 @@
+<template>
+  <AppPage>
+    <PageContent :page="page" />
+    <template #prev-next>
+      <PagePrevNext :prev="prev" :next="next" />
+    </template>
+  </AppPage>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  useContext,
+  useFetch
+} from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    page: {
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const { $docus } = useContext()
+    const prev = ref(null)
+    const next = ref(null)
+    useFetch(async () => {
+      const [prevLink, nextLink] = await $docus.getPreviousAndNextLink(
+        props.page
+      )
+      prev.value = prevLink
+      next.value = nextLink
+    })
+    return {
+      prev,
+      next
+    }
+  },
+  templateOptions: {
+    aside: true,
+    fluid: false
+  }
+})
+</script>
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
@@ -12,7 +12,7 @@ Learn more in [Introduction](/getting-started/introduction).
 You can start playing with Nuxt 3 in your browser using our online sandboxes:
 
 :button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank}
-:button-link[Play on CodeSandBox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
+:button-link[Play on CodeSandbox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
 
 ## New project
 

diff --git a/docs/content/1.getting-started/5.commands.md → docs/content/1.getting-started/3.commands.md b/docs/content/1.getting-started/5.commands.md → docs/content/1.getting-started/3.commands.md
diff --git a/docs/content/1.getting-started/3.bridge.md → docs/content/1.getting-started/4.bridge.md b/docs/content/1.getting-started/3.bridge.md → docs/content/1.getting-started/4.bridge.md
@@ -1,4 +1,4 @@
-# Bridge
+# Migrating to Bridge
 
 Experience Nuxt 3 features on existing Nuxt 2 projects.
 
@@ -136,7 +136,7 @@ You may also need to add `@vue/runtime-dom` as a devDependency if you are strugg
 ::
 ::alert
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
-Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead Typescript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
+Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead TypeScript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
 
 In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the `alias` property withing your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::
@@ -198,13 +198,13 @@ If you want to use the new Nuxt composables (such as `useNuxtApp` or `useRuntime
 Although a compatibility interface is provided via `nuxtApp.vueApp` you should avoid registering plugins, directives, mixins or components this way without adding your own logic to ensure they are not installed more than once, or this may cause a memory leak.
 ::
 
-## New `useMeta` (optional)
+## New `useHead` (optional)
 
-Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useMeta` composable.
+Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useHead` composable.
 
 ```vue
 <script setup>
-useMeta({
+useHead({
   title: 'My Nuxt App',
 })
 </script>
@@ -222,10 +222,10 @@ export default defineNuxtConfig({
 })
 ```
 
-This `useMeta` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
-Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useMeta`, as they may conflict.
+This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
+Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
 
-For more information on how to use this composable, see [the docs](/docs/usage/meta-tags#usemeta-composable).
+For more information on how to use this composable, see [the docs](/docs/usage/meta-tags#usehead-composable).
 
 ## Feature Flags
 
@@ -241,10 +241,10 @@ export default defineNuxtConfig({
 
     // -- Opt-in features --
 
-    // Use Vite as the bundler instead of Webpack 4
+    // Use Vite as the bundler instead of webpack 4
     // vite: true,
 
-    // Enable Nuxt 3 compatible useMeta
+    // Enable Nuxt 3 compatible useHead
     // meta: true,
 
     // -- Default features --
@@ -255,10 +255,10 @@ export default defineNuxtConfig({
     // Disable nuxt 3 compatible `nuxtApp` interface
     // app: false,
 
-    // Disable composition API support
+    // Disable Composition API support
     // capi: false,
 
-    // ... or just disable legacy composition API support
+    // ... or just disable legacy Composition API support
     // capi: {
     //   legacy: false
     // },

diff --git a/...tting-started/4.bridge-composition-api.md → ...tting-started/5.bridge-composition-api.md b/...tting-started/4.bridge-composition-api.md → ...tting-started/5.bridge-composition-api.md
@@ -250,12 +250,12 @@ title.value = 'new title'
 Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
 ::
 
-Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the `useMeta` composable.
+Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the `useHead` composable.
 
 ```diff
 <script setup>
 - import { useMeta } from '@nuxtjs/composition-api'
-  useMeta({
+  useHead({
     title: 'My Nuxt App',
   })
 </script>
@@ -272,6 +272,6 @@ export default defineNuxtConfig({
 })
 ```
 
-This `useMeta` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useMeta`, as they may conflict.
+This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
 
-For more information on how to use this composable, see [the Nuxt 3 docs](/docs/usage/meta-tags#usemeta-composable).
+For more information on how to use this composable, see [the Nuxt 3 docs](/docs/usage/meta-tags#usehead-composable).