import { defineNuxtPlugin } from '@nuxtjs/composition-api'

export default defineNuxtPlugin((context) => {
  // Plugin logic 
})

import { defineNuxtMiddleware } from '@nuxtjs/composition-api'

export default defineNuxtMiddleware((ctx) => {
  // Middleware logic
})

import { defineNuxtModule } from '@nuxtjs/composition-api'

export default defineNuxtModule<{ myOption: boolean }>(
  (moduleOptions) => {
  // module logic
})

import axios from 'axios'

export default {
  data() {
    return {
      mountains: []
    }
  },
  async fetch() {
    this.mountains = await axios.get('https://api.nuxtjs.dev/mountains')
  }
}

import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const mountains = ref([])

    useFetch(async () => {
      mountains.value = await axios.get('https://api.nuxtjs.dev/mountains')
    })

    return { mountains }
  }
})

import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const mountains = ref([])

    // Use fetch to re-fetch data
    // Use fetchState to check if error, pending or all good
    // Both exist in the template already ($fetch, $fetchState)
    const { fetch, fetchState } = useFetch(async () => {
      mountains.value = await axios.get('https://api.nuxtjs.dev/mountains')
    })

    return { mountains }
  }
})

export default {
  async asyncData(ctx) {
    const { slug } = ctx.params
    const mountain = await ctx.$axios.$get('https://api.nuxtjs.dev/mountains/' + slug)
    context.store.dispatch('initializeMountains')
    
    return { mountain }
  }
})

import { defineComponent, useContext, slug } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    // There is the Nuxt.js context
    // You might know it from asyncData or middleware
    // It contains store, route, params and more
    const context = useContext()

    context.store.dispatch('someAction')
    const { params } = context
    const slug = computed(() => params.value.slug)
    
    context.$http.$get('https://api.nuxtjs.dev/tips')
  }
})

import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { $http } = useContext()
    
    // Returns a null ref that is populated when the call resolves
    const posts = useAsync(() => $http.$get('https://api.nuxtjs.dev/mountains'))

    return { posts }
  }
})

export default defineComponent({
  setup() {
    const { params } = useContext()
    const slug = computed(() => params.value.slug)
    const beer = useStatic(
      slug => axios.get(`https://api.nuxtjs.dev/beers/${slug.value}`), // 1
      slug, // 2
      'beers' // 3
    )

    return { beer }
  },
})

import { provide,onGlobalSetup, } from "@nuxtjs/composition-api";
import { DefaultApolloClient } from "@vue/apollo-composable";

export default defineNuxtPlugin(({ app }) => {
  onGlobalSetup(() => {
    provide(DefaultApolloClient, app.apolloProvider?.defaultClient);
  });
});

import { defineComponent, ref, useMeta } from '@nuxtjs/composition-api'

// component must be defined via defineComponent
export default defineComponent({
  head: {} // has to exist to work
  setup() {
    // Setting some meta data
    useMeta({ title: 'My awesome site' })
  
    // Get refs for meta data
    const { title } = useMeta()
    title.value = 'New title'
  
    // Computed Meta
    const message = ref('')
    useMeta(() => ({ title: message.value }))
    message.value = 'Changed!'
  }
})

import { onGlobalSetup, useMeta } from '@nuxtjs/composition-api'
import { useCanonical } from '@/composables/useCanonical'

export default function () {
  onGlobalSetup(() => {
    const { link } = useMeta()
    useCanonical(link)
  })
}

import { ssrRef } from '@nuxtjs/composition-api'

const setFrom = ssrRef('')
setFrom.value = process.server ? 'server' : 'client'

const expensive = ssrRef(someExpensiveFunction)

function useGetFancyResult() {
    // The key for ssrRef is injected automatically
    // But it is NOT UNIQUE per function call by default
    const result = ssrRef('', 'ajsiodasjiod') // BABEL
    // ...
    return result
}

const a = useGetFancyResult()
const b = useGetFancyResult()

b.value = 'oh oh!'
// Now, a and b will have the same value
// Because they use the SAME KEY internally