I'm brand new to using Nuxt.js, and having an issue: When I created my project, the layouts folder wasn't generated automatically as documented. I added it manually, but default.vue is not being applied anywhere. Here is layouts/default.vue:
<template>
<div>
<AppHeader/>
<Nuxt/>
</div>
</template>
I've tried things such as manually setting default as the layout in pages and manually importing the AppHeader component in default.vue (although this is definitely not the issue as other HTML I put there doesn't get rendered either). Not sure what's going wrong here, scratching my head. Using nuxt 2.15.7. If there's any additional detail needed please let me know what and I'll gladly provide, thanks.
Today, I faced the same issue, I just stop the dev command and did "npm run dev" again.
It woked like a charm.
I also faced this issue today, and it took my like 15 minutes to realize...
I just named my folder layout instead of layouts :')
I'm posting it just in case someone else is as distracted as I am
Was Facing this same issue, it was fixed by wrapping contents of app.vue with <NuxtLayout></NuxtLayout>
example:
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
For more details look here:
https://github.com/nuxt/framework/discussions/2883
Just define your components folder path in nuxt.config.js
eg:
components: {
dirs: [
'~/shared',
'~/shared/atoms',
'~/shared/molecules',
'~/shared/organisams',
]
},
Related
I have a component that has a sidebar and content as shown below.
When the page is refreshed, the first time the component content is loaded below as shown below and in an instant, the components are back to normal.
I use module.css in every component. With a structure like this:
component
|___Sidebar
| |___index.tsx
| |___index.module.css
|___Content
|___index.tsx
|___index.module.css
Can anyone explain what happened? Is this happening because I'm using css folder structure like that which causes styles to be late to read?
How do you think this problem can be solved?
One of the option is to load the CSS files in the index.js or app.js file which is the top most component in your app. Then you can use the dom event to add the component like below. Currently it is difficult to reproduce the issue since you haven't shared any code. But I would suggest worth giving this a try. Make sure you add the CSS files in index.js file
document.addEventListener("DOMContentLoaded", function(event) {
ReactDOM.render(
<App />,
document.getElementById('root')
);
});
I am using Angular 13,and as you can see from the pictures above,I have already imported the correct custom css and js files in angular.json, however whenever I try to separate components from index.html to app component.html the sidebar stops working
I've had this problem for 2 weeks now and it's stopping me from completing my full stack project, if anyone can be of any help I'd be forever grateful and if you need more details and info I'll update the post
thank you
I'm using gatsby.js with a styled component to develop my portfolio and when it doesn't render any CSS when I load my site the first time. However, it renders all CSS correctly when I refresh the page. What could be the reason?
This is my portfolio: https://haribhandari.me
The first time you open the link, the CSS will not load, however, if you refresh it will.
When using styled components, Gatsby on production may not render styles correctly. To fix that, follow those instructions:
Install following packages:
npm install gatsby-plugin-styled-components styled-components
babel-plugin-styled-components
Edit the gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
],
}
More information are described in the documentation
A great way to let other's help you out is to provide some code snippets as it is hard to go through your site's code just in the browser tools.
I am not a gatsby expert and hope someone can help you understand the concept better. I would look into your <head> section.
<link as="script" rel="preload" href="/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js">
There is a similar topic regarding this issue here Gatsby v2 site does not load CSS properly
I also notice that your menu does not scroll to your projects section, you may want to take a look at that code as well.
Hope this helps
I'm a Vue noob and just need to understand something pretty basic. I'm used to vue-cli 3 where you have your "App.vue" and that's kind of your root component and of course you have your <script> and <style> tags in there like any other component. But when I start up a Vue project with vue-cli 3 and then do a vue add vuetify, App.vue no longer contains those tags and when I add them, the app breaks! Also there's a new folder called "views"? Can anyone break this down for me? I'm sorry to ask here but I can't find anything about it on Vuetify's page.
UPDATE:
Something strange happened when I tried to set up another project the same way -- everything looked like how I'm used to. That's with the following options selected after running vue add vuetify:
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font md
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? No
? Select locale en
I realized that the /views folder came from having installed vue-router in that project, which I'm guessing may have had to do with the main App.vue file not accepting <script> or <style> tags? I'm going to revisit the vue-router docs but any additional input here would be much appreciated.
i see that Use a pre-made template? (will replace App.vue and HelloWorld.vue) question you answer it with yes and that will replace app.vue and HelloWorld.vue, so in the next time type no to answer it, you have to pay attention because they say (will replace App.vue and HelloWorld.vue)
Just trying to get a basic example of react-tabs working. The styling seems to be missing. The example below is in code sandbox (look in 'Hello.js'), but I see exactly the same behavior after installing the package into my project via npm. What am I missing? Thanks!
https://codesandbox.io/s/jzql1q6819
From the docs at https://github.com/reactjs/react-tabs#styling
react-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.
You will have to import the styles yourself. I don't think Code Sandbox will let you import them directly from the NPM package, so you will have to use a CDN or other source.
Besides that, the tabs are working in your example. Clicking a list item reveals different content
Here is a fork of your example with the styles added: https://codesandbox.io/s/ym7l2zk4oj