mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat(bridge): enable composition-api (#551)
This commit is contained in:
parent
a137d2e5ec
commit
fc019b8816
@ -26,7 +26,7 @@ Performance | 👎 Slower | 👍 Enhanced | 🔥 Fastest
|
||||
Nitro Engine | ❌ | ✅ | ✅
|
||||
ESM support | 🌙 Partial | 👍 Better | ✅
|
||||
Typescript | ☑️ Opt-in | 🚧 Faster | ✅
|
||||
Composition API | 📖 Community | 🚧 Nuxt3 API | ✅
|
||||
Composition API | ⚠️ Deprecated | ✅ | ✅
|
||||
Components Auto Import | ✅ | ✅ | ✅
|
||||
Auto Imports | ❌ | 🚧 | ✅
|
||||
Webpack | 4 | 5 | 5
|
||||
|
@ -60,7 +60,14 @@ If you have a project with `target: 'static'`, update "build" script to use `nux
|
||||
See [Migrating from CommonJS](#step-2-avoid-commonjs-syntax) from module author section.
|
||||
We need same steps for `plugins`, `store`, `pages`, `serverMiddleware` and `nuxt.config.js`.
|
||||
|
||||
### **Step 4:** Ensure everything goes well
|
||||
### **Step 4:** Remove incompatible modules
|
||||
|
||||
- Remove `@nuxt/content` (1.x): **note**: a v2 rewrite for nuxt 3 support is planned, or you may also use docus
|
||||
- Remove `nuxt-vite`: Bridge injects module when enabled with `{ bridge: { vite: true } }`
|
||||
- Remove `@nuxt/nitro`: Bridge injects module
|
||||
- Remove `@nuxtjs/composition-api`: Bridge provides a nuxt 3 compatible composition-api layer.
|
||||
|
||||
### **Step 5:** Ensure everything goes well
|
||||
|
||||
Try with both `nuxt dev`, `nuxt build` and `nuxt start` if everything goes as expected
|
||||
If there is an issue, please report it to us or to relavant module repository.
|
||||
|
@ -2,27 +2,19 @@ import { useNuxt, resolveModule } from '@nuxt/kit'
|
||||
import { resolve } from 'upath'
|
||||
import { distDir } from './dirs'
|
||||
|
||||
export function setupAppBridge () {
|
||||
export function setupAppBridge (_options: any) {
|
||||
const nuxt = useNuxt()
|
||||
|
||||
// Setup aliases
|
||||
nuxt.options.alias['#app'] = resolve(distDir, 'runtime/index.mjs')
|
||||
nuxt.options.alias['#build'] = nuxt.options.buildDir
|
||||
|
||||
// Resolve to same vue2 path
|
||||
nuxt.options.alias.vue = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
|
||||
|
||||
// Transpile runtime/
|
||||
nuxt.options.build.transpile.push(resolve(distDir, 'runtime'))
|
||||
|
||||
// Add composition-api support
|
||||
// nuxt.options.alias['@vue/composition-api'] = require.resolve('@vue/composition-api/dist/vue-composition-api.mjs')
|
||||
// const capiPluginPath = resolve(distDir, 'runtime/capi.plugin.mjs')
|
||||
// addPluginTemplate({ filename: 'capi.plugin.mjs', src: capiPluginPath })
|
||||
// nuxt.hook('webpack:config', (configs) => {
|
||||
// // @ts-ignore
|
||||
// configs.forEach(config => config.entry.app.unshift(capiPluginPath))
|
||||
// })
|
||||
// Resolve to same vue2 path
|
||||
nuxt.options.alias.vue = nuxt.options.alias.vue ||
|
||||
resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
|
||||
|
||||
// Fix wp4 esm
|
||||
nuxt.hook('webpack:config', (configs) => {
|
||||
|
23
packages/bridge/src/capi.ts
Normal file
23
packages/bridge/src/capi.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { useNuxt, addPluginTemplate } from '@nuxt/kit'
|
||||
import { resolve } from 'upath'
|
||||
import { distDir } from './dirs'
|
||||
|
||||
export function setupCAPIBridge (_options: any) {
|
||||
const nuxt = useNuxt()
|
||||
|
||||
// Error if `@nuxtjs/composition-api` is added
|
||||
if (nuxt.options.buildModules.find(m => m === '@nuxtjs/composition-api' || m === '@nuxtjs/composition-api/module')) {
|
||||
throw new Error('Please remove `@nuxtjs/composition-api` from `buildModules` to avoid conflict with bridge.')
|
||||
}
|
||||
|
||||
// Add composition-api support
|
||||
nuxt.options.alias['@vue/composition-api'] = require.resolve('@vue/composition-api/dist/vue-composition-api.mjs')
|
||||
const capiPluginPath = resolve(distDir, 'runtime/capi.plugin.mjs')
|
||||
addPluginTemplate({ filename: 'capi.plugin.mjs', src: capiPluginPath })
|
||||
nuxt.hook('webpack:config', (configs) => {
|
||||
// @ts-ignore
|
||||
configs.forEach(config => config.entry.app.unshift(capiPluginPath))
|
||||
})
|
||||
|
||||
// TODO: Add @nuxtjs/composition-api shims
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
import { defineNuxtModule, installModule } from '@nuxt/kit'
|
||||
import { setupNitroBridge } from './nitro'
|
||||
import { setupAppBridge } from './app'
|
||||
import { setupCAPIBridge } from './capi'
|
||||
|
||||
export default defineNuxtModule({
|
||||
name: 'nuxt-bridge',
|
||||
@ -8,7 +9,8 @@ export default defineNuxtModule({
|
||||
defaults: {
|
||||
nitro: true,
|
||||
vite: false,
|
||||
app: true,
|
||||
app: {},
|
||||
capi: {},
|
||||
// TODO: Remove from 2.16
|
||||
postcss8: true,
|
||||
swc: true
|
||||
@ -18,7 +20,13 @@ export default defineNuxtModule({
|
||||
await setupNitroBridge()
|
||||
}
|
||||
if (opts.app) {
|
||||
await setupAppBridge()
|
||||
await setupAppBridge(opts.app)
|
||||
}
|
||||
if (opts.capi) {
|
||||
if (!opts.app) {
|
||||
throw new Error('[bridge] Cannot enable composition-api with app disabled!')
|
||||
}
|
||||
await setupCAPIBridge(opts.capi)
|
||||
}
|
||||
if (opts.vite) {
|
||||
await installModule(nuxt, require.resolve('nuxt-vite'))
|
||||
|
5
packages/bridge/src/runtime/app.mjs
Normal file
5
packages/bridge/src/runtime/app.mjs
Normal file
@ -0,0 +1,5 @@
|
||||
const mock = () => () => { throw new Error('not implemented') }
|
||||
|
||||
export const defineNuxtPlugin = mock()
|
||||
export const defineNuxtComponent = mock()
|
||||
export const useNuxtApp = mock()
|
@ -1,10 +1,10 @@
|
||||
export * from '@vue/composition-api'
|
||||
|
||||
const mock = () => () => { throw new Error('not implemented') }
|
||||
|
||||
export const useAsyncData = mock()
|
||||
export const asyncData = mock()
|
||||
export const defineNuxtComponent = mock()
|
||||
export const useSSRRef = mock()
|
||||
export const useData = mock()
|
||||
export const useGlobalData = mock()
|
||||
export const useHydration = mock()
|
||||
export const defineNuxtPlugin = mock()
|
||||
|
@ -1 +1,2 @@
|
||||
export * from './app'
|
||||
export * from './composables'
|
||||
|
14
test/fixtures/bridge/pages/index.vue
vendored
14
test/fixtures/bridge/pages/index.vue
vendored
@ -1,3 +1,15 @@
|
||||
<template>
|
||||
<div>Hello Vue!</div>
|
||||
<div>Hello Vue {{ version }}!</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from '#app'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
version: ref('2')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user