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
What I want to create is a web application with Laravel Lumen and VueJS, where Laravel Lumen is used for an API and VueJS for a SPA. In the application I want an admin section, a small forum and the website. I want to reuse this concept in future projects where I can easily decide if I want a forum or admin section in the website, or possibility to expand easily like adding a shop.
My concept idea of structure
My idea was to make three separate vue instances of the different sections inside the Lumen project.
A example of the directory structure would look as follow:
(lumen project)
├── app
├── node_modules
├── public
├── resources
│ ├── js
│ │ ├── admin
│ │ │ ├── components
│ │ │ ├── router
│ │ │ ├── store
│ │ │ ├── views
│ │ │ └── admin.js // where I create a vue instance
│ │ ├── forum
│ │ │ ├── components
│ │ │ ├── router
│ │ │ ├── store
│ │ │ ├── views
│ │ │ └── forum.js // where I create a vue instance
│ │ └── site
│ │ ├── components
│ │ ├── router
│ │ ├── store
│ │ ├── views
│ │ └── site.js // where I create a vue instance
│ ├── sass
│ │ ├── admin
│ │ ├── forum
│ │ └── site
│ └── views
├── routes
├── package.json
├── webpack.mix.js
...
With Laravel-mix the js/vue and sass files will be for each compiled to three separate files in the public folder:
const mix = require('laravel-mix');
require('laravel-mix-alias');
mix.js('resources/js/site/site.js', 'public/js')
.js('resources/js/admin/admin.js', 'public/js')
.js('resources/js/forum/forum.js', 'public/js')
.sass('resources/sass/site/site.scss', 'public/css')
.sass('resources/sass/admin/admin.scss', 'public/css')
.sass('resources/sass/forum/forum.scss', 'public/css')
.setPublicPath('public');
mix.alias({
'#': '/resources/js/site',
'#admin': '/resources/js/admin',
'#forum': '/resources/js/forum',
'~': '/resources/sass/site',
'~admin': '/resources/sass/admin',
'~forum': '/resources/sass/forum'
});
Then in the (laravel) Lumen Routes and controllers there will be decided which js, admin, site or forum, has to be included inside the Lumen View. So each section has there own Lumen View, like admin.blade.php, site.blade.php and forum.blade.php. From there on the view will be generated inside Vue and Lumen will be used as API.
My question
I wonder if I'm going a good direction before I go further, is this a good practice? What could be better, or what should be totally different? I think that an other option would be separating everything totally and create separate repositories instead of one, but I want everything as one product. I'm looking for an answer which explains what would be best practice for my situation.
Tried three years ago something similar. I'll share my experience and hope it helps:
Even if it looks good at first, you will find along the development process that your SPA's do not share as much code as you initially presume. They will diverge and they will become harder and harder to maintain as a single codebase.
After repeated failures, I've reached my perfect setup: I've identified my admin SPA to be the one I need with every project. So that one is the single one included with my Lumen API and it is built and managed as a single codebase.
The Marketing/Presentation website is a totally different project, Vue-only, created with vue-cli. Other apps (like a forum) are also separate projects.
On the long run, this allows you to:
maintain the admin template together with the API (for example, I found the user management to be something I want for 80% or my API's, so my admin template now features the CRUD operations for users)
start from a modern template and not an obsolete one for new web apps: for example, you can have the website not as a SPA Vue app but a Nuxt website. Of course, you'll be connecting to the same Lumen API.
you won't be forced to use the same layouts and CSS frameworks for your new projects.
when you identify a repetitive code fragment between your projects, you can easily add it in your starter (template) repository. It's easier to delete that to write.
But, if you decide to go with the monolithic approach, I would suggest moving the sass files alongside your SPA's, something like /resources/admin/js/components and /resources/admin/sass/base.scss.
there
My solution would look like kind of dirty or not "professional", but what i've been doing is creating something like "app-factory.js". This file what does is looking for the url on my app, for instance "/dashboard" then return all the vuejs stuff necessary for the vue application (store, vue, etc). I have another file called app.js, this file get files from app-factory.js then create the vue instance. On all my laravel view is getting this app.js (dashboard.blade.php, students.blade.php).
I want to use a local json file in my app. I simply import it and use without any problem in development. But after build, it's bundled and I cannot see or change it.
I don't want it to be bundled, so I can change it while my app is working on my host.
or any other suggestion is appreciated.
<script>
import articlesJson from "./../static/articles.json";
export default {
name: "Body",
data() {
return {
articles: articlesJson
};
},
};
</script>
My dist folder after build.
.
├── css
│ ├── app.934f0703.css
│ └── chunk-vendors.e246dba9.css
├── fav.ico
├── img
│ └── profile-photo.446da51d.jpg
├── index.html
└── js
├── app.01988997.js
├── app.01988997.js.map
├── chunk-vendors.3ee1fa24.js
└── chunk-vendors.3ee1fa24.js.map
You should be able to import the data in your json file if you convert it to a .js file and declare and export your json object.
const myObject = { 'property': 'value' }
export default myObject;
Then you should be able to use it like any other module. Alternately you may need a some sort of a json loader... webpack docs
Edit
I just saw that your problem isn't importing the file but updating it. If you want your app to see the up to date version you'll need to reference that file directly rather than importing the module from the bundle. The bundle won't be updated without your repacking/deploying.
I'm not sure how you're serving your app, but in addition to referencing your json file directly, you need to make sure that file is deployed to the server rather than simply hanging out with the rest of your unbundled js which shouldn't be deployed.
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'm following this tutorial: https://docs.realm.io/sync/getting-started-1/react-native-quick-start/step-1-query-based-sync#step-4-create-a-constants-file-and-set-the-realm-instance-address
Many documents including this tutorial refers a src folder, but when I create a React Native project with a command like react-native init MyProject, it doesn't create src folder. Why is that?
Following is my folder structure:
├── App.js
├── android
├── app.json
├── index.js
├── ios
├── node_modules
├── package.json
└── yarn.lock
because react-native-cli do not provide src folder. its up to you, how you design or architect your app. directory structures are upto you and you need to write code accordingly. Generally project specific code always kept in src folder. In your case, there is just one component and App.js is the only file that holds the entire code. but as there will many screens/components you will find it unmanageable. for sake of modularity, src folder is made and used.
App
|
|--src
|
|--assets
|--components
|--screens
|
|--loginScreen.jsx
|--homeScreen.jsx
Just manually create your src folder. It's just used to better organize your project.