@vasya sure, hope it helps.

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1/graphql'
})

export default defineComponent({
  name: 'App',
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
});
</script>

@pazarbasifatih P.S. in composition api “this” is similar to context which can be accessed as second parameter in setup function

setup(props, context)

Or can be destructed if only refs is needed

setup(props, { refs })

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>

You should make a codepen example. It’s not clear what issue you have.

@wpq this is some basic css question not really related to quasar or even js. Lots of ways to accomplish this for one you could add float:left to all elements.

Also check quasar select component it already does what you’re trying to accomplish https://quasar.dev/vue-components/select#Example--Selected-item-slot

@pazarbasifatih P.S. in composition api “this” is similar to context which can be accessed as second parameter in setup function

setup(props, context)

Or can be destructed if only refs is needed

setup(props, { refs })

Yes back button doesn’t work the same way as good old pre js rendering days. Try keep-alive component https://router.vuejs.org/api/#router-view

Although from your twitter example I wouldn’t use vue router to redirect user to different page just show it on the same page.

@erhard you mean you want to highlight input text? You could just hide text and use default slot to show div on top of input also disable pointer events for div overlay. It is a bit hacky but either this or you’ll have to replace your inputs with div+contenteditable.

  <q-input v-model="text" label="Standard">
    <template v-slot:default>
      <div class="relative">
        <div 
             class="absolute text-black" 
             style="left:0;top:25px;pointer-events:none"
             v-html="text.replace(search, `<span class='text-red'>${search}</span>`)"
        ></div>
      </div>
    </template>
  </q-input>
  
  <style>
  
    input {
  
      color: white !important
  
    }
  
  </style>

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>

@s-molinari but why is this still in a docs? https://apollo.vuejs.org/guide/installation.html#_1-apollo-client

@metalsadman yeah I think I weren’t clear enough. I meant updating nested object value dynamically. Basically idea is to wrap q-table in a custom component for easy CRUD.

If anyone encounters same problem I just ended doing it like this:

const columns = [
    {
      label: 'Client',
      field: row => row.client.name,
      editField: 'client.name',
    },
  ]

    const setRowField = (row, field, newValue) => {
      const keys = field.split('.')
      while (keys.length > 1) {
        row = row[keys.shift()]
      }
      row[keys[0]] = newValue
    }

  <template v-slot:body-cell="props">
    <td>
        <q-input :value="props.value" @input="setRowField(props.row, props.col.editField || props.col.field, $event)"/>
    </td>
  </template>

@vasya sure, hope it helps.

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1/graphql'
})

export default defineComponent({
  name: 'App',
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
});
</script>