docs: How should I use route, params and other reactive context data ?

[pull-vert]

📚 Is your documentation request related to a problem? Please describe.
I need to to access a url param (an ID) that is needed in my page, to use it in the title (using useMeta) and for accessing a backend resource by this id with a Axxios call. This was previously simply working with route.params.id, now I don't know what to do, I get a "params is undefined" exception. I don't know if my code below is wrong or if there is a bug in this 0.7.0 change.

import { defineComponent, useContext, watch } from 'nuxt-composition-api'

export default defineComponent({
  layout: 'empty',
  head: {}, // needed for meta
  setup() {
    // params from context
    const { params } = useContext()

    function logParam(params: Dictionary<string>) {
      console.log("id = " + params.id)
    }
    watch(() => params.value, logParam);
  }
} 

🔍 Where should you find it?
Vue-doc mention that these context properties are now reactive, but it could be interesting to complete the example app with all new features of this plugin.

ℹ️ Additional context
Add any other context or information.

[danielroe]

@pull-vert That looks good to me. If it's not working, maybe you could provide some more info and we could debug?

See this fixture page for example use.

[pull-vert]

@danielroe thanks for your answer.

First : I tried to update to 0.7.1, but I have an error and Nuxt app is not working anymore at all
"[vue-composition-api] must call Vue.use(plugin) before using any function."

So I switched back to 0.7.0, I confirm that in template I can access to params, as in your fixture page {{ params.slug }}

But inside setup function I did not manage to access to a param, I want to to use the 'id' route param it in the title (using useMeta) and for accessing a backend resource by this id with a Axxios call.

Something like this

const { params } = useContext()
const { title } = useMeta()

const post = ref<Post>()

watch(
  () => params,
  params => {
    console.log(params)
    const id = params.value.id
    title.value = `Post #${id}`
    useFetch(async () => {
      post.value = await $axios.$get<Post>(`/jobs/${id}`)
    })
  }
)

But I get an error
TypeError: "params is undefined"

But the console.log is interesting, the log shows that params is an Object that contains my id property
Object { id: "myIdIsHere" }
But typescript do not compile if I try direct access to params.id inside the watch function.
Property 'id' does not exist on type 'Readonly<Ref<Readonly<Dictionary<string>>>>'

So I could finally make it work with a simple cast, I even don't need to watch for the params reactive value, it works without it. But I think this is not acceptable

const { params } = useContext()
console.log((params as any).id) // works ! It correctly prints my id value

[danielroe]

Try:

const { params } = useContext()
const { title } = useMeta()

const post = ref<Post>()

watch(
  // this should either be just params as below or () => params.value 
  params,
  params => {
    console.log(params)
    // Within here params don't have `.value`
    // - you're being passed the unwrapped object
    const id = params.id
    title.value = `Post #${id}`
    useFetch(async () => {
      post.value = await $axios.$get<Post>(`/jobs/${id}`)
    })
  }
)

Would you be happy to share a sample project with me that shows the errors you're describing (particularly the issue with v0.7.1)?

[pull-vert]

Sorry when I use the piece of code you gave me I get an error

[Vue warn]: Failed watching path: "[object Object]" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.
TypeError: "params is undefined"

For now I will keep the temporary workaround

watch(
  () => params,
  params => {
    const id = (params as any).id
    ...
  }
)

My work is currently for a private company project that is starting, I will build a public new project from scratch with same configuration on my free time so it can take a few time, I will get back when this is done with link to it (I agree with you the 0.7.1 version issue is important) 😄

[danielroe]

@pull-vert It looks to me like all the issues you're reporting stem from the fact that the composition API isn't being initialised properly in your project, for whatever reason. So I'd be interested in how you configured the module, what version of Nuxt you have installed - and anything else that would assist me in replicating it.

[pull-vert]

@danielroe I confirm that there is a problem in my project. I forked your example app (before you updated it) and adapted it a little to our typescript and axios setup. I can access params normally as you suggested (in the _id.vue file), so I will find what is wrong in our real project !

I give you the link to this sample project, because the issue with 0.7.1 is still there. Just clone it, it works, but if you upgrade "nuxt-composition-api" version to 0.7.1 in package.json then issue appears.

[danielroe]

@pull-vert Strangely, I can't reproduce the issue with the sample project you've provided. Steps I took:

git clone https://github.com/pull-vert/nuxt-composition-api
cd nuxt-composition-api
# edit package.json to update to 0.7.1
npm install
npm run dev # works
npm run build && npm run start # works

[pull-vert]

Thanks a lot, I got it working too ! I removed node_modules folder (seems that this step is required), and then did npm install, now it is okay ! 😄

[danielroe]

Great! 😁