Comments (6)
<script setup>
allow the co-existence with the normal <script>
, meaning you can use this as a current workaround:
<script setup>
import { useMeta } from '@nuxtjs/composition-api'
useMeta({ ... })
</script>
<script>
export default {
head: {}
}
</script>
/cc @danielroe do you see if there is a way to by pass this limitation or we have to do that in compile time?
from unplugin-vue2-script-setup.
<script lang="ts" setup>
import { useContext, useAsync, ref, useMeta, defineComponent } from '@nuxtjs/composition-api'
const { $axios } = useContext()
const fontUrl = ref<string>('')
const title = ref('a')
useAsync(async () => {
title.value = 'b'
fontUrl.value = await $axios.$get('/xxx')
})
useMeta(() => ({
title: title.value
}))
</script>
<script lang="ts">
export default defineComponent({
head: {}
})
</script>
import { defineComponent as defineComponent$1 } from '@nuxtjs/composition-api'
declare global {
const defineComponent: typeof defineComponent$1
}
I worked it out for now
from unplugin-vue2-script-setup.
How about the Nuxt middleware
property?
Edit: My bad didn't see the workaround.
<script setup>
// my code
</script>
<script>
export default {
middleware: '..',
layout: '..'
}
</script>
from unplugin-vue2-script-setup.
Just tried your suggestion @antfu, but useMeta
seems to be ignored.
// nuxt.config.js
head: {
title: 'Hello there'
}
// pages/index.vue
<script setup lang="ts">
import { useMeta } from '@nuxtjs/composition-api'
useMeta({
title: 'General Kenobi', // ignored
})
</script>
<script lang="ts">
export default {
head: {}, // the title only changes if I put it here.
}
</script>
Here is a codesandbox.
Also, trying to write a component with Fixed in latest releasedefineComponent
breaks build:
ERROR Cannot overwrite a zero-length range – use appendLeft or prependRight instead 18:33:47
at MagicString.overwrite (node_modules/magic-string/dist/magic-string.cjs.js:657:11)
at transform (node_modules/vue2-script-setup-transform/dist/chunk-YQNABFGI.js:461:5)
at Object.transform (node_modules/vue2-script-setup-transform/dist/chunk-CIXBJ6SU.js:16:41)
at Object.transform (node_modules/vue2-script-setup-transform/node_modules/unplugin/dist/webpack/loaders/transform.cjs:11:28)
at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
from unplugin-vue2-script-setup.
Just tried your suggestion @antfu, but
useMeta
seems to be ignored.// nuxt.config.js head: { title: 'Hello there' }// pages/index.vue <script setup lang="ts"> import { useMeta } from '@nuxtjs/composition-api' useMeta({ title: 'General Kenobi', // ignored }) </script> <script lang="ts"> export default { head: {}, // the title only changes if I put it here. } </script>
Here is a codesandbox.
Also, trying to write a component withFixed in latest releasedefineComponent
breaks build:ERROR Cannot overwrite a zero-length range – use appendLeft or prependRight instead 18:33:47 at MagicString.overwrite (node_modules/magic-string/dist/magic-string.cjs.js:657:11) at transform (node_modules/vue2-script-setup-transform/dist/chunk-YQNABFGI.js:461:5) at Object.transform (node_modules/vue2-script-setup-transform/dist/chunk-CIXBJ6SU.js:16:41) at Object.transform (node_modules/vue2-script-setup-transform/node_modules/unplugin/dist/webpack/loaders/transform.cjs:11:28) at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14) at runSyncOrAsync (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:120:4) at iterateNormalLoaders (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:232:2) at Array.<anonymous> (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16) at node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9 at node_modules/graceful-fs/graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
hi, is the workaround really working?
from unplugin-vue2-script-setup.
<script setup>
allow the co-existence with the normal<script>
, meaning you can use this as a current workaround:<script setup> import { useMeta } from '@nuxtjs/composition-api' useMeta({ ... }) </script> <script> export default { head: {} } </script>
/cc @danielroe do you see if there is a way to by pass this limitation or we have to do that in compile time?
This should be in the docs! I was trying forever to figure out how to specify a layout:
<script lang="ts" setup>
const ctx = useContext()
function logout (): void {
ctx.$auth.logout('local')
ctx.$toast.success('Logout Successful')
}
</script>
<script lang="ts">
export default { layout: 'user' }
</script>
from unplugin-vue2-script-setup.
Related Issues (20)
- import script setup component Module has no default export. HOT 5
- How to access route / router from vue-router 3.5.3 HOT 3
- Error when giving variable the same name as a tag in the template HOT 2
- How to get output of the SFC compiler? HOT 1
- Renaming of template refs is not reflected in the template HOT 1
- defineProps is not defined with ESbuild HOT 10
- Error on bound SVG attributes HOT 3
- v-model 与 defineEmits 如何使用 HOT 7
- Jest is broken since v0.10.2 HOT 3
- Is it possible to use this plugin side by side with class components? HOT 2
- Property 'addCount' does not exist on type '{}'.ts(2339) HOT 5
- No matching export in "xxx/index.vue" for import "default" HOT 2
- Add compatibility with Vue ^2.7.0 HOT 3
- vite 3.0 启动报错[vite] Internal server error: $ can only be used as the initializer of a variable declaration. HOT 1
- uniapp小程序支持吗 HOT 3
- Import a type with the same name as component will wrongly register it HOT 3
- 类型“{}”上不存在属性“XXX”。ts(2339) HOT 1
- Nuxt Bridge Build Error involving script setup HOT 1
- uni-app 项目通过 unplugin-vue2-script-setup 插件使用 <script setup>,条件编译失效。
- 无法匹配script标签中换行的setup
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unplugin-vue2-script-setup.