I have App.vue:
<template>
<test/>
<test-two/>
</template>
<script>
import Test from './components/Test.vue'
import TestTwo from './components/TestTwo.vue'
export default {
name: 'App',
components: {
Test,
TestTwo
}
}
</script>
components/Test.vue
<template>
<test-two/>
</template>
<script>
import TestTwo from './TestTwo.vue'
export default {
name: 'test',
components: [
TestTwo
]
}
</script>
components/TestTwo.vue
<template>
<span>I test!!!</span>
</template>
<script>
export default {
name: 'test-two',
}
</script>
I'm get the warning
[Vue warn]: Failed to resolve component: test-two
at <Test>
at <App>
But the direct mention of <test-two> in App.vue seems to be working. Why might this be?
The project has been freshly scaffold using vue-cli.
You have a syntax error in your Test.vue, components are declared as array but should be object:
components: [
TestTwo
]
Should be:
components: {
TestTwo
}
Related
I've installed Laravel 9, and latest version of Vue 3.2.45, It's my first time using Laravel 9 and Vue 3, and I see that the Laravel 9 uses Vite as a module bundler. So I've wanted to do a quick demo just to get me started, but I'm stuck.
I've can't get anything on the screen.
vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
'#': '/resources/js',
},
},
});
app.js:
import './bootstrap';
import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
}
},
created() {
alert('test')
},
})
app.mount('#app')
test.blade.php:
#vite('resources/js/app.js')
<div id="app">
<button #click="count++">#{{ count }}</button>
</div>
Output:
<div id="app" data-v-app=""><!----></div>
What is happening? The code is running, and I'm getting the alert message, but the app root element is empty.
I want to show login page outside the layout but unfortuntly i see the sidebar and header on login page sidebar and header should not be on login page please help me how can i resolve that thank u ?
App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Layout from './components/Layouts/Layout.vue'
</script>
<template>
<div id="app">
<Layout></Layout>
</div>
<RouterView />
</template>
<script>
export default {
name: 'App',
components: {
Layout,
}
}
</script>
router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/dashboard',
name: 'dashboard',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/DashBoard.vue')
},
]
})
export default router
Use conditional rendering to hide/show elements based on the current route
<Layout v-if="route.path !== '/'"></Layout>
<script setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'
import Layout from './components/Layouts/Layout.vue'
const route = useRoute();
</script>
Also, not sure why you have two script tags. You don't need to register components with the Composition API (script setup), so you can/should remove the second script
I'm trying to pass data from a component through the parent to another child components props but the prop stays undefined in vue tools.
I tried having another variable stored in data and setting its value in the watcher for the prop but it stays undefined aswell.
Here's a snippet of what I'm trying to do.
App.vue
<template>
<NameDisplayer :name="name" />
<NameChanger #update="(n) => updateDisplayer(n)"/>
</template>
<script>
import NameDisplayer from './NameDisplayer.vue';
import NameChanger from './NameChanger.vue';
export default {
components:{
NameDisplayer,
NameChanger
},
data: function(){
return{
name: ""
}
},
methods: {
updateDisplayer(newVal){
this.name = newVal;
}
}
}
</script>
NameDisplayer.vue
<template>
<span>{{ name }}</span> //Name is always empty
</template>
<script>
export default:{
name:"NameDisplayer",
props:{
name: String
},
watch:{
name(newV, oldV){
console.log("Watcher: ", newV, oldV); //This prints out the correct values
}
}
}
</script>
NameChanger.vue
<template>
<span></span>
<input type="text" v-model="name" />
<button #click="updateName()">Update</button>
</template>
<script>
export default{
name:"NameChanger",
data: function(){
return{
name: ""
}
},
methods:{
updateName(){
this.$emit('update', this.name);
}
}
}
</script>
I'm trying to run a component unit test on Nuxt 3 but I get an error telling me that the component cannot be found..
FAIL test/components/button.test.ts [ test/components/button.test.ts ]
Error: Failed to resolve import "#/components/Texts/Button/ButtonText.vue" from "components\Button\Button.vue". Does the file exist?
button.spec.ts
import {test, expect} from 'vitest';
import {mount} from '#vue/test-utils';
import Button from "../../components/Button/Button.vue";
test('Button Component', async () => {
const button = mount(Button, {
props: {
text: 'My Test Button'
}
});
expect(button.text()).toEqual('My Test Button');
});
Button.vue
<template>
<div class="Button">
<slot name="left" />
<ButtonText :text="text" />
<slot name="right" />
</div>
</template>
<script lang="ts">
export default {
name: 'Button',
components: {ButtonText},
props: {
// Text to display in the button
text: {
type: String as () => string,
default: 'Button',
required: true,
},
}
}
</script>
any ideas ?
Assuming, that #/components/Texts/Button/ButtonText.vue actually exists, a solution to your problem might be adding aliases to your ./vitest.config.ts like that:
// vitest.config.ts
import { defineConfig } from 'vite'
import { aliases } from './aliases'
export default defineConfig({
resolve: { aliases },
// ... further settings
})
// aliases.ts
import { resolve } from 'path';
const r = (p: string) => resolve(__dirname, p);
export const alias: Record<string, string> = {
'~~': r('.'),
'~~/': r('./'),
'##': r('.'),
'##/': r('./'),
// ... other aliases
};
I have created npm library that is installed on another project through package.json. The library is created in Vue3. The problem is that components that are created with script setup are not recognized by IDE (WebStorm) and components that are created with Options API (without script setup) are recognized. Both components works, but the problem is that for example test-input component is not recognized and test-button components is.
vite.config.ts
build: {
cssCodeSplit: false,
lib: {
entry: './src/TestDesignSystemPlugin.ts',
formats: ['es', 'cjs'],
name: 'TestDesignSystemPlugin',
fileName: (format) => (format === 'es' ? 'index.js' : 'index.cjs'),
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
TestButton.vue - Component created with Options API
<template>
<button>
<slot />
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'TestButton',
})
</script>
TestInput.vue - Component created with Composition API
<template>
<input v-model="model" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const model = ref('')
</script>
Also this is TestDesignSystemPlugin.ts file that is used in vite.config.ts and where components are installed:
import type { App } from 'vue'
import {
TestButton,
TestInput,
} from '#/components'
export default {
install: (app: App) => {
app.component('TestButton', TestButton)
app.component('TestInput', TestInput)
},
}
UPDATE:
I don't think that issue is with IDE, than with the build of the library (plugin). When I see index.js of the build I see the difference between components that are with setup and without setup:
var TestDesignSystemPlugin = {
install: (app) => {
app.component("TestButton", TestButton);
app.component("TestButtonSocial", TestButtonSocial);
app.component("TestInput", _sfc_main$8);
}
};