Im having a basic universal app created with Nuxt.
Im new with vue and nuxt and im trying to understand how routing works, to be more specific how nested routes works.
So my projects structure is
├── parent
│ ├── child1.vue
│ └── child2.vue
├── parent.vue
and in the parent page i have two links for child1 and child2
<template>
<div>
<h3>Parent page</h3>
<nuxt-link to="/parent/child1"> about1 page</nuxt-link>
<nuxt-link to="/parent/child2"> about2 page</nuxt-link>
</div>
</template>
My goal is when i click on the links to go to next page for example /parent/child2,
but that doesn't happens. When i click on the links it reopens the same parent page.
Move file parent.vue to parent/index.vue
just a small hint you can also use parent/_slug.vue for your children
Related
I have a repo called core-components
The folder structure for the repo is
├── src
│ ├── assets
│ └── components
Assets contains all the images and components use images from assets.
I have used core-components as dependency in another repo called ui
ui also has same folder structure. Now whenever I am using components from core-components in ui I am not able see the image. I get the following error in ui.
[Vue Router warn]: No match found for location with path "/assets/images/abc.svg
It is trying to look the image in ui assets folder.
Image in core-componets is written in template like this
<v-img src="../assets/images/abc.svg" />
ui is using nuxt3 and core-components is using vue3.
in Nuxt, with this folder structure.
main
├── parent1
│ └── index.vue
├── parent2
│ └── index.vue
├── _parent1.vue
├── _parent2.vue
_parent1.vue and _parent2.vue contains <nuxt-child> tag inside and supposedly render the contents of parent1/index.vue parent2/index.vue contents respectively.
but... when accessing ~/main/parent1 and ~/main/parent2 route, both shows the content of _parent1.vue!!! or whichever component that comes first alphabetically.
is it a known bug? are there any solution to make is work as expected?
edit: added underscore to parent file
Writing nativescript vuejs I have the following structure:
-src/
-- App.vue
-- views/
-- Login.vue
In vuejs we utilize <router-view> in App.vue and use routing to render Login.vue. How do I need proceed using nativescript?
Could somebody explain how to add a multi levels (children) path using nuxt. The structure of my project is:
├root
│ ├── events
│ ├── _id.vue
│ ├── cateogries
│ └── _id.vue
Basically my links are like this:
http://localhost/events
Will display a list of events
http://localhost/events/{id}
Will display the event information plus some categories
http://localhost/events/{id}/category/{id}
Will display the event category information
I've tried doing the structure of the folders and subfolders and is not working.
I've tried to use inside _id.vue from events <nuxt-child/> and is not working.
Does anyone has any ideas how to solve this?
Thank you in advanced.
First, not duplicate id param, use other name.
you can use such a structure:
├pages
│ ├── events
│ ├── _eid
│ ├── category
| |__ index.vue
│ └── _id.vue
_id.vue for http://localhost:3000/events/2/category/5
<template>
<div>
{{ $route.params }} //{ "eid": "2", "id": "5" }
Hello from _id
</div>
</template>
For each level add index.vue or a dynamic "_".
Also be consistent in names (category or categories)
I think this may be offtopic but I don't know how else to ask it or where else to direct it. I'm a new web developer and I'm used to building CSS and HTML from scratch to make various tools. I wanted to make a move into a framework like Bootstrap to make things look a little more professional but I'm really struggling to understand how to use it.
I'm struggling to understand the file structure bootstrap provides and where it should live in my web server. The basic minified download consists of folders for css, fonts and js. However examples such as the jumbotron reference other files such as
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
But I don't know where these files are supposed to live. Do I need to modify each of these href links? What should the file structure look like?
Thanks for any help.
if you look at the latest version of bootstrap getting started guide you will be able to understand the folder structure.
Bootstrap has separated out the different type of files into different folders.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
JS file is needed in case you want to use the plugins provided by Bootstrap. if you dont want to use any plugins then you dont have to include js file.
in your example above , first file is obvious that its a bootstrap.css file. second file is fix for ie, some feature of bootstrap doesn't work in ie10. Third file is application specific file. and 4th one is for debugging purpose as said in the comments.
if you are using bower or some other tool for dependency management then all your third party dependencies should go eaither in bower_components or vendor folder. all you application specific css should reside in your app folder.
hope it helps.