I know this isn't the best time to use vuetify 3 but, i did. Hoping everything goes well until i found out that a lot of components are still missing.
Now, I am having a problem importing a lazy component using defineAsyncComponent.
my DOM doesn't seem to recognize async components.
I don't know if it is a vuetify error but my project is made out of vuetify so I was suspecting it was the problem.
Below is my code in dashboardACtionsLayout.vue
<template>
<div>
<div class="d-flex mb-3 mt-2">
<add-customer-modal />
</div>
</div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
components: {
addCustomerModal: defineAsyncComponent(() =>
import("#/components/customer/addCustomerModal.vue")
);
}
</script>
<style lang="scss" scoped></style>
and this is the error i am getting in my console:
Use defineAsyncComponent like below.
<template>
<div>
<div class="d-flex mb-3 mt-2">
<add-customer-modal />
</div>
</div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
const AddCustomerModal = defineAsyncComponent(() =>
import('#/components/customer/addCustomerModal.vue')
)
</script>
<style lang="scss" scoped></style>
note:
The name of your component is addCustomerModal, while vue's recommendation is that the beginning of all words should be capitalized, like AddCustomerModal.
It is now fixed as of #m kh answer. But when I try to register two components using this code; `
const AddCustomerModal = defineAsyncComponent(() =>
import("#/components/customer/addCustomerModal.vue")
);
const CustomersModal = defineAsyncComponent(() => {
import("#/components/customer/customersModal.vue");
});
` I will get an error like this
Related
This question already has answers here:
ref vs reactive in Vue 3?
(7 answers)
Closed last month.
When I import HelloWorld component into App.vue, I'm unable to see the content of contenutoHeader.
HelloWorld:
<template>
<h1>{{ contenutoHeader }}</h1>
</template>
<script>
const contenutoHeader = "Sto funzionando";
export default {
name: "HelloWorld",
};
</script>
App.vue
<template>
<div>
<HelloWorld />
</div>
</template>
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>
Any suggestion?
You need to add your state to the data, like so:
<template>
<h1>{{ contenutoHeader }}</h1>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
contenutoHeader: "Sto funzionando"
}
}
};
</script>
Anything within the data is reactive and can be used in your template
GOAL: get API call from a headless CMS that returns a JSON with an array of content components with their settings and content
now, the CMS does not know if the components are available
neither does the APP, it tries to be dynamic
so, I am using vite / vue 3 and composition API
to get a component loading I am using this pattern
<script setup lang="ts">
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
);
<script>
<template>
<AdminPage />
</template>
if I try to use directly assigned component it all works fine. The problem is when I am trying to use an array for it
<script setup lang="ts">
const contentPlaceholders = ref<any[]>([]);
const error = ref<any>(false)
const { data, status } = await axios.get('/get-content');
if(status === 200) {
data.forEach((placeholder: any) => {
contentPlaceholders.value.push({
component: defineAsyncComponent(() => import(`#/components/${kebabCase(placeholder.componentName)}/${placeholder.componentName}.vue`)
),
})
});
}
<script>
<template>
<Suspense>
<div>
<template v-for="placeholder in contentPlaceholders">
<component :is="placeholder.component"></component>
</template>
</div>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
I never get components rendered... even if I do just
<template>
<Suspense>
{{ contentPlaceholders }}
...
</Suspense>
</template>
If I do it with a fix array like this...
it works fine... unless the component does not exist
<script setup lang="ts">
import { kebabCase } from 'lodash'
let contentPlaceholders = shallowRef<any[]>([])
const comps: string[] = ['RichTitle', 'RichText', 'NonExistant']
comps.forEach((cmp: string) => {
try {
contentPlaceholders.value.push({
component: defineAsyncComponent(() => import(`#/components/${kebabCase(cmp)}/${cmp}.vue`)),
})
} catch (e) {}
})
</script>
<template>
<Suspense>
<div>
<template v-for="placeholder in contentPlaceholders">
<component :is="placeholder.component"></component>
</template>
</div>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
So how can I catch errors and make sure the app does not break when trying to import an non existent component?
I am following a tutorial to create a blog using headless cms with nextjs .
Even though api calls are working but it is not being rendered on the localhost.
following is the code in index.js :
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { GraphQLClient, gql } from "graphql-request";
import BlogPost from "../components/BlogPost";
const graphcms = new GraphQLClient(
"https://api-ap-south-1.graphcms.com/v2/cl4plwtca25zv01z4apa66xo8/master"
);
const query = gql`
{
posts {
id
title
date
slug
content {
html
}
author {
name
picture {
url
}
}
coverImage {
url
}
}
}
`;
export async function getStaticProps() {
const { posts } = await graphcms.request(query);
return {
props: {
posts,
},
revalidate: 10,
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
{posts.map((post) => {
<BlogPost
title={post.title}
author={post.author}
slug={post.slug}
coverImage={post.coverImage}
date={post.date}
/>;
})}
</main>
</div>
);
}
following is the code in BlogPost.js:
import Link from "next/link";
import styles from "../styles/BlogPost.module.css";
export default function BlogPost({ title, author, coverImage, date, slug }) {
return (
<div className={styles.card}>
<Link href={`/posts/&{slug}`}>
<div className={styles.imgContainer}>
<img src={coverImage.url} alt=" " />
</div>
</Link>
<div className={styles.text}>
<h2>{title}</h2>
<div className={styles.details}>
<div style={style.author}>
<img src={author.picture.url} alt="" />
</div>
</div>
</div>
</div>
);
}
with the above code it is expected to show everything that is on graphcms but I am only getting a blank screen. Please find the problem here!
You're not returning anything in your .map (Assuming you really are getting data)
{posts.map((post) => {
return <BlogPost <---- notice the `return` keyword
title={post.title}
author={post.author}
slug={post.slug}
coverImage={post.coverImage}
date={post.date}
/>;
})}
I'm messing around with next.js. I have a CSV with some data that I would like to display in a table. I'm getting a curious error when I try and import the csv.
./static/data.csv 1:66
Module parse failed: Unexpected token (1:66)
You may need an appropriate loader to handle this file type.
Character 66 is a space
When I remove the space, it errors on the next space. I'm not sure what I should be doing differently.
Code:
import Link from 'next/link';
import React from 'react';
import Head from 'next/head';
import Header from '../components/Header';
import NavBar from '../components/NavBar';
export default () => (
<div>
<title>Test</title>
<div class="title">
<p>
<img className="logo" src="/static/logo.png" />
<h1>Test</h1>
</p>
<br/>
</div>
<hr/>
</div>
)
const data = import('../static/data.csv');
Try this in next.config.js file
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
})
return config
}
}
I want to connect this toastr-library into my component:
my-component.vue
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style>
/* HOW TO IMPORT `toastr.css` FROM NODE_MODULES HERE?
</style>
How to connect library's css from node_modules directory?
As #LinusBorg suggested here in vue-loader discussion thread, you can use src-attribute inside <style>-tag:
my-component.vue
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style src='toastr/build/toastr.min.css'></style>