Whenever I was creating a new Nuxt project, there were directories like: components, pages, static, store, .nuxt, node_modules but there are no layouts and other directories as of right now.
How can I fix that?
You are probably referring to this question: Some of the directories are missing when I'm trying to create a new Nuxt js project
My answer is in there!
Also, .nuxt is a cache directory that you should not touch to, same goes for node_modules so far. node_modules will be available if you yarn normally.
PS: this is based on the assumption that you are doing npx create-nuxt-app <project-name>.
Related
I wonder why there is a README.md in every folder in the default project structure. Is it intended to keep it?
Answer from the Nuxt Discord: Create-nuxt-app only recently made git optional, but it was automatically added previously. AFAIK git can't track empty directories, thus they used README.md to mitigate this. Other solutions I've seen are creating files like .gitignore or .gitkeep inside a empty directory to ensure the empty directory is tracked/commited. It can be any name, but gitkeep seems to be what people gravitated to, yet I never did this personally.
Is it necessary to have all files while re-designing website?
Like, I've designed a site with Nuxt JS, published it, now if in future I want to make some changes, do I need all files back that I started with? Like all node modules, pages folder, components folder, everything? Asking because there are tons of files in total.
A recent case happened with me is, I wanted to do some changes in my recent Nuxt JS site, but I missed "pages" folder, however I have "dist" folder. Is there any way I can like recover "pages" folder from my final production site?
Also, what will be best practice to manage Nuxt JS projects? Any tips, tricks will be appreciated.
To develop on a NuxtJS site, you need the directories and files listed in the Nuxt guide's Directory Structure section. The files you don't need for future development are the files in the default .gitignore that create-nuxt-app generates for you, including the dist directory and the node_modules directory.
The dist directory can be regenerated from your source code using npm run generate and node_modules from running npm install if you have package.json or package-lock.json file. Anything that can be generated from some other file(s), you don't need to keep.
Is there any way I can like recover "pages" folder from my final production site?
Unfortunately not.
What will be best practice to manage NuxtJS projects?
Not sure what you mean with "manage", but if you don't use git yet, then git.
I have a project with an existing webpack setup and it's unrelated to Vue.
Until now I have multiple entry points setups and some of these entry points are opening some iframes popups, and the plan is to build these iframes with VUE.
This means that I will also have multiple VUE entry points, this shouldn't be a problem but what I can't figure out is:
what is the best way to add VUE-cli into this already existing setup and use the same node_modules folder
Also to be able to add the vue-cli build commands to be run/triggered after my existing webpack build commands.
Let me know if more details are needed?
I've figure it out and it turn out that you can have both in the same project.
I've used vue create on my existing project folder and there is a prompt with a merge options.
Unfortunately it deleted my dependencies but was not such a big deal. Just had to reinstall them.
Now my project's webpack configuration remained completely separate form vue-cli which is handled by the vue.config.js and this is exactly what I wanted.
I am using something like this to build everything at once:
"build": "webpack --config webpack.prod.js && vue-cli-service build"
I have a PHP project that uses Kirby CMS. I also use Gulp for building my assets. Now, I need to add a calculator on the homepage that is complex enough to justify the usage of Vue. How would I incorporate Vue in my project without introducing a ton of new tooling? All I want is a simple Single File Component basically. I have:
<div id="calculator"></div>
and I want the component to be rendered there. Nothing more.
After some consideration, I came up with the following options but found issues with each of them:
Use the Vue CLI for instant prototyping. That's the closest solution for my use case, but I can't easily develop the component. If I use vue serve, I get to see the component isolated in a new page. The issue lies in the fact the component isn't a part of my project's page. It's not affected by its stylesheets, layout, and other scripts. I can't know if it'll work properly once I build it and view it in my project. Running vue build on each change would be pretty painful and time consuming. Sadly, vue watch isn't a thing, which leads me to:
Creating a project and using Vue CLI Service. If I create a project, I'd be able to run vue-cli-service build --watch and have my component automatically refresh on each change of its source file. While developing the component, I simply make a change, wait for it to compile, and refresh my project in the browser to see the modified component in action. While that would work, it introduces a bunch of node_modules inside my project, along with a package.json. I feel that's too much for just a single component. It would pollute the project more than I'd like:
assets/
js/
build/
calculator/
dist/
node_modules/ # modules here
public/ # I don't need that
package.json # package here
package-lock.json
App.vue
scripts/
main.js
content/
site/
node_modules/ # modules here as well
panel/
package.json # package here as well
package-lock.json
index.php
I would basically have a project within a project.
Use vueify to compile the component with Browserify and Gulp (which I already use). While this appears OK, vueify is deprecated and not supported. Besides, I'd have to add a bunch of stuff to my gulpfile.js in order to use Babel + ESLint for the component.
How do I set up Vue in such a way that I'm able to develop a very simple component as a part of a larger project with as little friction as possible?
If anyone has dealt with a similar problem, how did they solve it?
I ended up using the second approach I mentioned in my question with one small twist - I initialized the Vue project in my main project. I merged them.
I opened the parent folder of my project in a terminal.
I ran vue create my-project where my-project was the actual folder name of my project. The CLI asked if it should overwrite the project or merge it. I chose merge.
After the project was created, my old package.json was overwritten and only had the Vue dependencies listed in it.
I reverted my old package.json and installed these packages: #vue/cli-plugin-babel, #vue/cli-service, vue-template-compiler, and vue.
I added the following npm script in my package.json:
"scripts": {
"calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
}
Result
My project's folder structure remained the same, except for a few new packages in node_modules. I put my component files in assets/js/calculator/. There, I have main.js which is the main component script, and build which is a folder containing the processed component.
I have:
<div id="calculator"></div>
in my page, and:
<script src="/assets/js/calculator/build/app.js"></script>
in the footer. When I open the page, the component is rendered correctly.
To modify the component, I simply run npm run calculator in a terminal, which spins up the CLI service. It monitors the main.js file and builds the component on each change. Once the build is complete (which happens in under a second), I refresh the page and the updated component is there.
Conclusion
I believe that's the smoothest way to handle this use case. It didn't bloat the project, all dependencies were listed, and the development experience is great. The part where my package.json got overwritten was a bit concerning, but other than that - it worked perfectly. If there's a better way to do this, please leave an answer!
This is probably not the answer you're looking for but if I were you I'd look into inline templates and x-templates as they seem well suited to your use case.
Also have a look at this blog post. It offers a nice write up about the different template authoring methods in Vue and their pros/cons.
I am new to vuejs. Recently I noticed that when I pull, it says conflict in app.js file. But I can't find the issue as app.js file is big.
Sould I add this file to gitignore file?
what is best practice to work with vue js?
I imagine you are building to a folder /dist and the app.js being conflited is the one inside of it.
You should ignore the /dist altogether. This folder is generated on the building process, meaning everyone that runs the project will update and create it.
Here is the default vue-cli .gitignore:
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
Not that not anything here may be useful to put in your own .gitignore. But you should for sure have at least node_modules and /dist.
If you are building the Vue project by scratch then I can say the following, when building/compiling your Vue project, best practices say that you should handle your entire production ready project in a dist/ or build/ directory where your main app.js file where the conflicts you are having would occur. This directory is only reserved for deploying the app and is not saved into your code repository, hence on why you should add to the .gitignore file the directory that holds such production files.