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.
Related
I'm using Frappe Framework to develop a custom app and I'm looking to use NuxtJS for the app's Portal.
A frappe app's folder structure is like this:
custom-app/
├─ custom-app/
│ ├─ www/
│ │ ├─ index.html
├─ README.md
While running, the app's portal/website runs/loads files in the www folder.
My intention is to initialize Nuxt in the index.html file. If there were docs on how to use NuxtJs via CDN like we can do with VueJs it'd have been easier to just create a new app instance inside index.html.
So far, I have managed to create a package.json inside custom-app, the root folder, and ran yarn add nuxt to add it to the package dependencies. I know, if I run yarn dev inside the root folder, I'll be able to browse the app via localhost:3000, but I intent to setup the Nuxt app's structure inside the www folder, but keeping node_modules & package.json in the root folder.
Is there a way to run a nuxt app from an inner/sub folder as I'm imagining?
I have an npm package structured as follows:
my-package
├── build
├── many.config.files
├── package.json
└── src
It made sense to put helper files such as config files and scripts into the root of my package. Then it made sense to have a src file so that my source files wouldn't mix with all my config files. Then it made sense to have a build directory where the built version of src would get populated (maybe some transpiling and minification happens, etc).
Now my src directory has various JS files and folders, all of which users of my library should be able to import.
src
├── file1.js
├── file2.js
└── utils
For example, import utils3 from "my-package/utils/file3.js" should work just fine for them. They should not need to type import utils3 from "my-package/build/utils/file3.js" to import the file.
What is the best practice for dealing with this situation?
I have tried/considered various approaches:
Setting "main": "./build" in my package.json. This did not resolve the import error for me.
Setting "directories": {"utils": "./build/utils"} in my package.json. This did not resolve the import error for me.
Copying package.json into my build directory during build. Then npm publishing the build directory instead of the entire project. This has the upside of only sharing the built code. This has the downside that the built package will have information in its package.json that doesn't make sense because files/directories are missing/mislocated.
Something along the lines of module.exports = require('./build') in an index.js file. This did not work either.
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.
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.
I would like to use this plugin. To prerender some of my vue.js components.
The structure of my project is the one coming with Laravel 5.4
├── app
├── artisan
├── bootstrap
├── resources
├── assets
js
app.js
bootstrap.js
components
webpackconfig.js
My components are located in components
I added this in my webpackconfig.js to try to render the component linked to the / route.
new PrerenderSpaPlugin(path.join(__dirname, './dist'), [ '/' ]),
Problem
The file index.html which is generated contains {"statusCode":404,"error":"Not Found"}
Questions
What should I do to be able to pre-render my components ?
Follow the documentation sample. You are using a wrong path, Use ../dist instead of ./dist
new PrerenderSpaPlugin(
// Path to compiled app
path.join(__dirname, '../dist'),
// List of endpoints you wish to prerender
[ '/' ]
)
https://vuejs-templates.github.io/webpack/prerender.html
You should target the correct path for your index.html entry point.
You are currently targeting the dist folder.