-
Notifications
You must be signed in to change notification settings - Fork 0
/
tutorial.txt
65 lines (63 loc) · 2.62 KB
/
tutorial.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
1. yarn create nuxt-app nuxt-film
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in nuxt-film
? Project name: nuxt-film
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
2. coba run, yarn dev
3. buka components, hapus yg tidak dipakai wicis nuxtlogo dan tutorial
4. buka index.vue, tambahkan div class home
5. install sass, yarn add --dev sass sass-loader@10
6. buat folder assets
7. buat file default.scss, copas style dari repo https://github.com/johnkomarnicki/movies-app-nuxtjs/tree/master/movieapp
8. buka nuxt.config.js, tambahkan ini
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['@/assets/default.scss'],
9. buat folder layouts, buat file default.vue
10. pindahkan isi dari nuxt/layouts/default.vue ke layouts/default.vue
11. buat folder movies di pages
12. buat file _movieid.vue di folder pages/movies
13. buat file Hero.vue di components
14. buat folder images di dalam assets, tambahkan image
15. isi hero.vue dengan css dari repo dan tampilkan bg gambar
16. isi script di index.vue
//cara Deployment
1. login github
2. buat repo baru
3. lakukan di terminal
git remote add origin https://github.com/henhenmuldani/nuxt-film.git
git add .
git commit -m "deployment"
git branch -M master
git push -u origin master
4. login netlify
5. pilih import dari github
6. https://nuxtjs.org/deployments/netlify#deploy-nuxt-on-netlify
7. setting di netlify nya, https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125/2?utm_source=404page&utm_campaign=community_tracking
For a statically generated site
Make sure you have target: 'static'in your nuxt.config.
Branch to deploy: main, or which-ever branch you prefer
Build command: npm run generate
Publish directory: dist
For client side rendering only
Make sure you have target: 'static' and ssr: falsein your nuxt.config.
Branch to deploy: main, or which-ever branch you prefer
Build command: npm run generate
Publish directory: dist
The easiest way to fix this is by adding a generate property in your nuxt.config and
setting fallback: true. Then it will fallback to the generated 404.html when in SPA mode
instead of Netlify's 404 page.
export default {
generate: {
fallback: true
}
}