Skip to content

Composition API version #2075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Composition API version #2075

wants to merge 2 commits into from

Conversation

pbkompasz
Copy link
Contributor

Description of Problem

Some code examples were missing the composition API/options API variant, toggle button was not switching between the two variants.

Proposed Solution

Added missing Composition API examples.

Additional Information

@netlify
Copy link

netlify bot commented Nov 10, 2022

Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit 83d3a9a
🔍 Latest deploy log https://app.netlify.com/sites/vuejs/deploys/6377eee0294fa200089414c5
😎 Deploy Preview https://deploy-preview-2075--vuejs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Contributor

@skirtles-code skirtles-code left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

I've provided some feedback below. In my opinion, introducing a Composition API version of the first example should be fine, but I don't think we can change the second example. More details below.

Comment on lines 38 to 40
import { ref } from 'vue';
const greeting = ref('Hello World!');
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest removing the indent, the semicolons, and the trailing }:

Suggested change
import { ref } from 'vue';
const greeting = ref('Hello World!');
}
import { ref } from 'vue'
const greeting = ref('Hello World!')

@@ -54,16 +81,36 @@ That said, we do realize there are scenarios where SFCs can feel like overkill.

Vue SFC is a framework-specific file format and must be pre-compiled by [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module:

```js
import MyComponent from './MyComponent.vue'
<div class="options-api">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should change this second example. The current example is intended to show importing a .vue file into a plain .js file. It's supposed to illustrate how .vue files are just ES modules. Showing a .vue importing a .vue doesn't quite make the same point about compatibility with normal JavaScript.

The existing example is valid for both the Options API and the Composition API. The components option is common to both.

@skirtles-code
Copy link
Contributor

This PR is superseded by #2145. The commits from this PR are included in that PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants