Update vue 3 getting started sample code #120

amit-ksh · 2022-10-07T07:03:17Z

Pull Request

Related issue

Fixes #117

What does this PR do?

Update the vue 3 getting started sample code from vue 2 in README.md

PR checklist

Please check if your PR fulfills the following requirements:

Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
Have you read the contributing guidelines?
Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!

bidoubiwa · 2022-10-07T07:03:21Z

Hello @amit-ksh,
Thank you very much for contributing to Meilisearch ❤️.
However, I am not available on the weekend, but I will be back on Monday 😊.

PS: This message was sent automatically!

bidoubiwa · 2022-10-18T10:30:55Z

Hey @amit-ksh ! Thanks for waiting, your PR flew under the radar! I'll be reviewing it ASAP!

bidoubiwa · 2022-10-18T10:57:57Z

I tried your sample out but unfortunately it does not work. Any idea why?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>

<body>
  <div id="app" class="wrapper">
    <ais-instant-search :search-client="searchClient" index-name="movies">
      <ais-configure :hits-per-page.camel="10" />
      <ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
      <ais-hits>
        <div slot="item" slot-scope="{ item }">
          <ais-highlight :hit="item" attribute="title" />
        </div>
      </ais-hits>
    </ais-instant-search>
  </div>
</body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue3/umd/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js">
</script>

<script>
  const app = Vue
    .createApp({
      data() {
        return {
          searchClient: instantMeiliSearch('http://127.0.0.1:7700')
        }
      }
    })
    .use(VueInstantSearch)
    .mount("#app");
</script>

</html>

amit-ksh · 2022-10-18T12:56:05Z

I don't know why it's not working, app is importing all the packages correctly but not able to use it plugin as well as the styled components.

bidoubiwa · 2022-10-18T13:26:18Z

Is it working for you?

amit-ksh · 2022-10-18T13:32:41Z

No, it's not working for me also. In the console, warning is logging out for meilisearch-instantsearch package

bidoubiwa · 2022-10-18T13:41:24Z

😕 Tell me if you achieve to make it work. Meanwhile I put this in draft.

amit-ksh · 2022-10-18T13:43:10Z

OK!

amit-ksh · 2022-10-21T03:57:47Z

Hey @bidoubiwa! I fix the sample code, would you review it again?

bidoubiwa · 2022-10-26T15:32:50Z

This message is sent automatically

Thanks again for contributing to Meilisearch ❤️
If you are participating in Hacktoberfest, and you would like to receive some gift from Meilisearch too, please complete this form.

bidoubiwa

Hey! Sorry for the delay I was on sick leave.

I'm happy to see that the samples work with vue 3 :) Is it possible to give them the same style as the vue2 one?
The sample should be as minimal as possible

amit-ksh · 2022-10-26T16:23:31Z

I will definitely give a try

amit-ksh · 2022-10-27T04:14:03Z

.code-samples.meilisearch.yaml

README.md

.code-samples.meilisearch.yaml

README.md

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

amit-ksh · 2022-10-27T13:57:52Z

Made all the requested changes.

bidoubiwa

Thanks a lot for fixing these bugs so quickly 🙏

Once you're done, can you put the two code samples in a new file named
.code-samples-vue-3.meilisearch.yaml
?

.code-samples.meilisearch.yaml

README.md

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

amit-ksh · 2022-10-30T17:24:24Z

@bidoubiwa could you review my changes please?

.code-samples-vue-3.meilisearch.yaml

bidoubiwa

After this small change I think the PR is good to be merged :)

amit-ksh · 2022-10-31T12:10:40Z

Done!

bidoubiwa

Nice work 🔥 Thanks a lot

bidoubiwa · 2022-10-31T17:25:37Z

This message is sent automatically

Thanks again for contributing to Meilisearch ❤️
If you are participating in Hacktoberfest, and you would like to receive some gift from Meilisearch too, please complete this form.

Update vue 3 getting started sample code

3dc8ad0

amit-ksh changed the title ~~Update vue 3 getting started sample code~~ Update README.md Oct 9, 2022

Add Vue 3 sample to getting started code sample

07cd8fc

amit-ksh changed the title ~~Update README.md~~ Update vue 3 getting started sample code Oct 9, 2022

bidoubiwa self-requested a review October 18, 2022 10:31

bidoubiwa added the skip-changelog The PR will not appear in the release changelogs label Oct 18, 2022

bidoubiwa marked this pull request as draft October 18, 2022 13:41

fix: vue 3 getting started code sample

ab41788

amit-ksh marked this pull request as ready for review October 21, 2022 03:57

bidoubiwa added the hacktoberfest-accepted label Oct 26, 2022

bidoubiwa suggested changes Oct 26, 2022

View reviewed changes

Update vue3 sample code

cc71546

bidoubiwa suggested changes Oct 27, 2022

View reviewed changes

.code-samples.meilisearch.yaml Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

.code-samples.meilisearch.yaml Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

amit-ksh and others added 5 commits October 27, 2022 15:33

remove class attribute from div

cfe64e0

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

fixed vue 3 getting started code

cc2c0d1

removed wrapper class

1ffc1bf

revert back to old vue 3 example

0900246

formatting

cfcda9d

amit-ksh requested a review from bidoubiwa October 27, 2022 13:58

bidoubiwa suggested changes Oct 27, 2022

View reviewed changes

amit-ksh and others added 5 commits October 27, 2022 21:34

Add CSS files in index.js

eb71747

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

Added wrapper class

bd5d668

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

updating vue 3 code sample and example

97b2527

added new stylesheet

90d539f

updated the CSS imports

a4e650e

amit-ksh requested a review from bidoubiwa October 28, 2022 04:26

bidoubiwa reviewed Oct 31, 2022

View reviewed changes

.code-samples-vue-3.meilisearch.yaml Show resolved Hide resolved

bidoubiwa reviewed Oct 31, 2022

View reviewed changes

bidoubiwa approved these changes Oct 31, 2022

View reviewed changes

bidoubiwa merged commit 3648d2b into meilisearch:main Oct 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update vue 3 getting started sample code #120

Update vue 3 getting started sample code #120

amit-ksh commented Oct 7, 2022

bidoubiwa commented Oct 7, 2022

bidoubiwa commented Oct 18, 2022

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022 •

edited

Loading

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022 •

edited

Loading

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022

amit-ksh commented Oct 21, 2022

bidoubiwa commented Oct 26, 2022

bidoubiwa left a comment

amit-ksh commented Oct 26, 2022

amit-ksh commented Oct 27, 2022

amit-ksh commented Oct 27, 2022

bidoubiwa left a comment

amit-ksh commented Oct 30, 2022

bidoubiwa left a comment

amit-ksh commented Oct 31, 2022

bidoubiwa left a comment

bidoubiwa commented Oct 31, 2022

Update vue 3 getting started sample code #120

Update vue 3 getting started sample code #120

Conversation

amit-ksh commented Oct 7, 2022

Pull Request

Related issue

What does this PR do?

PR checklist

bidoubiwa commented Oct 7, 2022

bidoubiwa commented Oct 18, 2022

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022 • edited Loading

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022 • edited Loading

bidoubiwa commented Oct 18, 2022

amit-ksh commented Oct 18, 2022

amit-ksh commented Oct 21, 2022

bidoubiwa commented Oct 26, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

amit-ksh commented Oct 26, 2022

amit-ksh commented Oct 27, 2022

amit-ksh commented Oct 27, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

amit-ksh commented Oct 30, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

amit-ksh commented Oct 31, 2022

bidoubiwa left a comment

Choose a reason for hiding this comment

bidoubiwa commented Oct 31, 2022

amit-ksh commented Oct 18, 2022 •

edited

Loading

amit-ksh commented Oct 18, 2022 •

edited

Loading