I'm facing an error with vue3, ts, vue cli where it says
Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export.
when importing a component from a file
I have no idea why did this specific component decide to now work.
here's Features.vue
<script lang="ts">
import Feature from "./Feature.vue";
</script>
<template>
<Feature />
</template>
With script setup syntax there's no need to add export default in your script, just add the setup attribute to your script:
<script lang="ts" setup>
import Feature from "./Feature.vue";
</script>
<template>
<Feature />
</template>
You must add export default in your component's script by example:
<script>
export default {
name: "HelpView",
};
</script>
Related
I want to access the "name" variable from <script> in my <script setup> block. I cant seem to figure out how to do it. I have tried importing options from '*.vue' but that prompts me to install module '*.vue'.
<script>
export default {
name: 'some name'
}
</script>
<script setup>
//use the 'name' variable here
</script>
Unfortunately, this thing can't be done. You could use ref and access its value anywhere in the file.
<template>
<h1>{{ name }}</h1>
</template>
<script setup>
import {ref} from 'vue';
const name = ref('Jorgen');
</script>
If you want to access it's value inside <script setup> you have to use .value.I have provided the following example in case you want to use it inside a method within <script setup>,
<script setup>
import {ref} from 'vue';
const name = ref('Jorgen');
const showMyName = () => {
alert(name.value);
}
</script>
In brief, if you want to use name inside the template don't use .value, if you want to use name inside use .value
You can access options exported from <script> by creating a circular dependency to the Vue component:
<script>
export default { name: "MyComponent" }
</script>
<script setup>
// HACK: Create a circular dependency to this file to get access to options.
import ThisComponent from "./MyComponent.vue"
console.log(`Setting up ${ThisComponent.name}`);
</script>
It also works with TypeScript (lang="ts").
I have a dynamic component in my project like that can be "Login" or "RegisterForm"
But it doesn't display anything.
<script setup lang="ts">
import { ref } from "vue";
import RegisterForm from '#/components/Layout/Navbar/Register.vue'
import Login from '#/components/Layout/Navbar/Login.vue'
let activeComponent = ref('Login')
</script>
<template>
<button #click="activeComponent='RegisterForm'">change to register</button>
<component :is="activeComponent" />
</template>
How can I fix this?
I'm not sure if this is the exact best way to write that in Composition API but this works without any error/warning.
<script setup>
import { shallowRef } from "vue";
import CompA from "#/components/CompA.vue";
import CompB from "#/components/CompB.vue";
const activeComponent = shallowRef(CompA);
</script>
<template>
<button #click="activeComponent = CompB">toggle to Component B</button>
<component :is="activeComponent" />
</template>
i'm developing my first vue app.
I decided to add it to my project using the html <script> tag (so not using the CLI).
Can I use the import statement for importing componente stored in .vue file?
You can't import .vue files unless you are using a module bundler like webpack.
However, there are multiple ways of defining a vue component which don't require you to use .vue files.
For example you can define a component in a file like this:
helloWorld.js
export default {
template : `<div>{{ message }}</div>`
data : () => ({
message : 'Hello World'
})
}
and then import it like this:
app.js
import HelloWorld from 'helloWorld.js';
new Vue({
el: '#app',
components: {
HelloWorld
}
});
Just remember to add type="module" when you import your js files into your html:
<body>
<div id="app">
<hello-world></hello-world>
</div>
<script type="module" src="helloWorld.js"></script>
<script type="module" src="app.js"></script>
</body>
I am new to Nuxt and having issues importing components.
components/Header.vue
<template>
<h1>Header</h1>
</template>
index.vue
<template>
<Header />
</template>
<script>
import Header from '#/components/Header';
export default {
components: {
Header
}
};
</script>
Replace the # with ~ but did not change anything
This is the error I am getting.
#/components/Header in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/buyer/index.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #/components/Header
It could be a simple mistake. But I'm a newbie in this area. I get a Syntax Error on Unexpected Token here:
component: () => import('#/layouts/default.vue'),
What would be the issue?
If you want to import a component into another module/component then use this at the top of your file:
import MyComponent from '#/layouts/default.vue'
...assuming you have exported MyComponent as the default export in your default.vue file.
You can change MyComponent to whatever you want.
I'm assuming you're using stand alone components. In that case, include export default in your default.vue file and then import DefaultComponent from '#/layouts/default.vue at the top of the file. Then, include the DefaultComponent in the Components section.
Default.vue
<template>
<p>{{hi}}</p>
</template>
<script>
export default{
data: function(){
hi: 'Hello World'
}
}
</script>
<style
</style>
Main.vue
<template>
<default-component></default-component>
</template>
<script>
import DefaultComponent from '#layouts/default.vue';
export default{
components: {
'default-component': DefaultComponent
}
}
</script>
<style
</style>